Анимация переходов android что это

Анимация переходов между двумя фрагментами

Одним из краеугольных камней в Material design являются осмысленные движения между экранами. Lollipop предоставляет поддержку этих анимаций в форме фреймворка переходов между Activity и Fragment. Поскольку статей по данной теме не так много, я решил написать свою собственную!

Наш конечный продукт будет достаточно прост. Мы будем делать приложение-галерею с котиками. При нажатии на изображение будет открываться экран с подробностями. Благодаря фреймворку переход из сетки изображений в окно с подробностями будет сопровождаться анимацией.

Если вы желаете увидеть, что получилось — готовое приложение находится на GitHub.

Поддержка предыдущих версий Android?

У меня есть для вас две новости: хорошая и плохая. Плохая новость заключается в том, что до Lollipop данный фреймворк не работает. Не смотря на это, проблема решается методами библиотеки поддержки с помощью которой вы можете реализовать анимированые переходы доступные в API 21+.

В статье будут использоваться функции из библиотеки поддержки для обеспечения перемещения контента.

Имена переходов

Для ассоциации View на первом экране и его двойника на втором нужна связь. Lollipop предлагает использовать свойство “transition name” для связи View между собой.

Существует два способа добавления имени перехода (transition name) для ваших View:

• В коде можно использовать ViewCompat.setTransitionName() . Конечно, вы так же можете просто вызвать setTransitionName() , если поддержка начинается с Lollipop.
• Для добавления в XML, используйте атрибут android:transitionName .

Важно отметить, что внутри одного макета (layout), имена переходов должны быть уникальны. Держите это в уме при организации переходов. Указывая transition name для ListView или RecyclerView задаст это же имя и для всех остальных элементов.

Настройка FragmentTransaction

Настройка FragmentTransactions должна быть вам очень знакомой:

Чтобы указать какую View будем передавать между фрагментами — используем метод addSharedElement() .

Переданная View в addSharedElement() это View из первого фрагмента, которую вы хотите разделить (share) со вторым фрагментом. Имя перехода тут является именем перехода в разделенной (shared) View во втором фрагменте.

Настройка анимации перехода

Наконец-то пришел момент, когда мы зададим анимацию перехода между фрагментами.

Для shared элементов:

• Для перехода с первого фрагмента во второй используем метод setSharedElementEnterTransition() .
• Для возврата назад используем метод setSharedElementReturnTransition() . Анимация произойдет при нажатии кнопки назад.

Заметьте, что вам необходимо вызвать эти методы во втором фрагменте, поскольку, если вы сделаете это в первом — ничего не произойдет.

Вы так же можете анимировать переходы для всех non-shared View. Для этих View, используйте setEnterTransition() , setExitTransition() , setReturnTransition() , и setReenterTransition() в соответствующих фрагментах.

Каждый из этих методов принимает один параметр Transition предназначенный для выполнения анимации.

Создавать анимацию мы будем очень просто. Мы используем наш кастомный transition для передвижения изображения (об этом чуть позже), и исчезание ( Fade ) при выходе.

Классы анимации перехода

Android предоставляет некоторые готовые анимации переходов, что подходят для большинства случаев. Fade выполняет анимацию исчезновения. Slide анимирует переход появления/исчезновения скольжением из угла экрана. Explode анимация подобная взрыву, изображение движется от краев экрана. И наконец, AutoTransition заставит изображение исчезать, двигаться и изменять размер. Это лишь некоторые примеры из пакета перемещений, их на самом деле намного больше!

Я упоминал, что нам понадобится кастомный переход для нашего изображения. Вот он:

Наш кастомный переход есть ни что иное как набор из трех готовых переходов собранных вместе:

• ChangeBounds
  анимирует границы (положение и размер) нашей view.
• ChangeTransform
  анимирует масштаб view, включая родителя.
• ChangeImageTransform
  позволяет нам изменять размер (и/или тип масштаба) нашего изображения

Если вам интересно узнать, как они втроем взаимодействуют попробуйте поиграть с приложением, поочередно убирая то одну то другую анимации, наблюдая за тем как все ломается.

Вы так же можете создать более сложные анимации используя XML. Если вы предпочитаете XML, то вам будет интересно посмотреть документацию на сайте андроида Transition
.

Все вместе

Код который в итоге у нас получился оказался достаточно простым:

Вот и все! Простой способ реализации анимации переходов между двумя фрагментами готов!

Источник

Как отключается анимация на Андроид для повышения быстродействия

Анимация на Андроид, как одна из функций мобильной операционной системы, позволяет плавно отображать переход между окнами приложений и различными меню. Более гладкий переход выглядит красиво, но в то же время занимает много времени и в большей степени активно использует ресурсы телефона.

Это приводит к визуальному замедлению работы ОС и ускоренной разрядке аккумулятора, который не всегда получается зарядить в течении дня. А аппетит современных приложений и без этого повышен.

Приятной возможностью для пользователей гаджетов с Android является то, что они могут отключить анимацию для увеличения видимой скорости работы или настроить её в соответствии с личными предпочтениями.

Под ускорением работы, на самом деле, стоит понимать не скорость работы операционной системы, а визуально быстрое отображение перехода между приложениями и появление различных меню. Они просто будут быстрее отображаться.

После отключения, если вы примете такое решение, снизится нагрузка на видеоускоритель и процессор. Это определенно поможет оптимизировать работу вашего девайса.

Давайте ознакомимся с подробным алгоритмом действий, который поможет осуществить задуманное. Это не сложно будет сделать даже тем, кто ранее не особо вникал в настройки телефона.

Анимация на Андроид

Для начала необходимо получить параметры разработчика в настройках. Это можно сделать так:

• перейдите в «Настройки»;
• пролистайте в самый низ и в разделе «Система» перейдите в меню «О телефоне»;
• там нажмите семь раз подряд на «Номер сборки».

Параметр «Для разработчиков» появится новой записью в меню после соответствующего уведомления.

Как отключить анимацию

Перейдите в него и прокрутите вниз до раздела «Рисование». В нем найдите три параметра:

• окно : масштаб;
• переход : масштаб;
• скорость анимации.

Присвойте им значения в соответствии с вашими предпочтениями. Если анимация необходима, то сделайте выбор от 0,5х до 10х. Чем больше значение установите, тем более гладко будут отображаться переходы.

Для того, чтобы заставить смартфон быстрее работать и меньше использовать ресурсы батареи, во всех трех параметрах установите значение «Отключить». Проверьте работу гаджета. Результат впечатляет?

Источник

Анимированные переходы в мобильных приложениях

Изображение: Ramotion

Анимация играет важную роль во взаимодействии с пользователями. Например, в мобильных приложениях с её помощью можно передать очень многое. Когда вы отправляете сообщение, открываете раздел настроек, ставите флажок или переходите на другую страницу, на экране происходят изменения. Анимация таких изменений — это удобный способ отображения действий пользователя.

В этой статье мы рассмотрим несколько типичных случаев, когда функциональная анимация дополняет визуальный дизайн и поддерживает взаимодействие пользователя с интерфейсом.

Осторожно: под катом много тяжёлых гифок.

Оповещения о состоянии системы

Если пользователь выполняет в системе какое-то действие, он ожидает увидеть чёткое и понятное подтверждение, что его запрос принят и обрабатывается. Вот несколько примеров того, как анимация позволяет повысить качество взаимодействия с пользователем.

• Подтверждение действия. Анимация может использоваться для того, чтобы показать пользователю, что система получила его запрос. Зная это, он не будет повторно нажимать на элемент управления.

Уведомите пользователей о результатах их действий. Изображение: Колин Гарвен (Colin Garven)

• Обновление содержимого страницы с помощью жеста pull to refresh. Визуальный отклик в виде индикатора загрузки помогает пользователям понять, что система обрабатывает их запрос.

Простая анимация помогает пользователям понять, что происходит. Изображение: Ramotion

• Ожидание загрузки содержимого. Этот процесс не обязательно должен быть скучным. Почти в любом приложении его можно скрасить простой анимацией, чтобы время ожидания не казалось очень долгим. Она привлечёт внимание пользователя, чтобы он не покинул приложение.

С помощью анимации можно начать взаимодействие с пользователем ещё до полной загрузки приложения. Изображение: UI8

Последовательность шагов в многоэтапных процессах

Некоторые действия требуют выполнения нескольких шагов. Очень важно, чтобы эти шаги были связаны друг с другом. Анимация — отличный инструмент, который помогает связать между собой каждый шаг и создаёт целостную картину происходящего.

Ниже представлен отличный пример того, как с помощью анимации можно отобразить последовательное развитие событий.

Изображение: Якуб Анталик (Jakub Antalík)

Анимация помогает дизайнерам использовать метод последовательного раскрытия (progressive disclosure). Он упрощает взаимодействие пользователя с интерфейсом, потому что в нужный момент отображается только необходимая часть информации. Ниже представлены два ярких примера применения последовательного раскрытия, когда пользователь получает информацию порциями.

Изображение: Ramotion

Изображение: Антон Скворцов

Представление новых элементов

Когда мы представляем новый элемент на странице, то стараемся привлечь к нему внимание пользователя и объяснить, зачем он нужен. В таких случаях анимация позволяет показать связи между объектами и их иерархию.

С помощью анимации можно показать, откуда взялись объекты. Изображение: Вирджил Пана (Virgil Pana)

Навигация в приложении

Анимация облегчает навигацию в приложении. Это особенно важно для мобильных устройств. Всё время отвлекаясь и работая с приложением на маленьком экране, пользователь может просто запутаться в огромном количестве различных страниц.

И здесь приходит на помощь анимация. Она объясняет пользователю, как связаны между собой переходы между экранами. Она не даёт ему запутаться, объясняя, где он находится в данный момент.

Ориентационная анимация позволяет определить, где вы находитесь по отношению к тому, где вы были раньше. Изображение: Джэ Сон Чон (Jae-seong, Jeong)

В примере ниже плавающая кнопка (floating action button, FAB) превращается в элемент заголовка, что позволяет пользователю понять, как связаны эти два объекта.

Анимация визуализирует связи между элементами. Изображение: Аниш Чандран (Anish Chandran)

Минимизация когнитивной нагрузки

Когнитивная нагрузка — это количество умственных усилий, необходимых для того, чтобы использовать продукт. Она во многом определяет удобство использования приложения. Как правило, чем больше усилий приходится прилагать для использования продукта, тем меньше он нравится пользователям.

Нашей целью является создание лёгкого в применении и удобного интерфейса. Анимация, если её правильно использовать, позволяет снизить количество усилий, необходимых для выполнения той или иной задачи.

Почти в каждом приложении пользователю необходимо заполнить какие-либо формы. Во многих из них поля помечены подсказкой-заполнителем. Когда пользователь выбирает такое поле, подсказка пропадает. В результате становится трудно понять, какую информацию необходимо ввести. Всплывающие подсказки (floating label) позволяют пользователям не терять контекст и обеспечивают удобство при заполнении длинных форм.

Когда речь заходит о вводе данных пользователем, не стоит полагаться на его память. Всю критически важную информацию необходимо оставить на виду. Изображение: MDS

Визуализация функциональных изменений

После взаимодействия с пользователем элемент может поменять свою функцию. Например, после нажатия кнопка начинает выполнять новое действие. Если анимировать это изменение, пользователю будет легче ответить на вопрос, что же теперь делает данный элемент.

Отличный пример можно найти во многих мобильных приложениях. Речь о переключателе. Анимация позволяет пользователю понять, в каком состоянии находится элемент.

Анимация проигрывается при нажатии на кнопку, чтобы изменения были сразу заметны. Изображение: Юрре Хауткамп (Jurre Houtkamp)

В некоторых случаях функциональное изменение одного элемента может полностью «изменить экран». В качестве примера можно привести кнопку меню, которая превращается в X и включает новый режим отображения.

Чётко покажите пользователям, что функция объекта изменилась. Изображение: Тамас Койо (Tamas Kojo)

Заключение

Если подойти к использованию анимации вдумчиво, её возможности окажутся поистине огромными. С её помощью можно оживить интерфейсы, сделав их по-настоящему «отзывчивыми» к действиям пользователя, и решить множество функциональных проблем. Для чего бы ни было предназначено ваше приложение, оно будет тесно взаимодействовать с пользователем. И именно анимация поможет сделать это взаимодействие по-настоящему захватывающим и эффективным.

Источник