Анимация переходов android что это
Как отключается анимация на Андроид для повышения быстродействия
Анимация на Андроид, как одна из функций мобильной операционной системы, позволяет плавно отображать переход между окнами приложений и различными меню. Более гладкий переход выглядит красиво, но в то же время занимает много времени и в большей степени активно использует ресурсы телефона.
Это приводит к визуальному замедлению работы ОС и ускоренной разрядке аккумулятора, который не всегда получается зарядить в течении дня. А аппетит современных приложений и без этого повышен.
Приятной возможностью для пользователей гаджетов с Android является то, что они могут отключить анимацию для увеличения видимой скорости работы или настроить её в соответствии с личными предпочтениями.
Под ускорением работы, на самом деле, стоит понимать не скорость работы операционной системы, а визуально быстрое отображение перехода между приложениями и появление различных меню. Они просто будут быстрее отображаться.
После отключения, если вы примете такое решение, снизится нагрузка на видеоускоритель и процессор. Это определенно поможет оптимизировать работу вашего девайса.
Давайте ознакомимся с подробным алгоритмом действий, который поможет осуществить задуманное. Это не сложно будет сделать даже тем, кто ранее не особо вникал в настройки телефона.
Анимация на Андроид
Для начала необходимо получить параметры разработчика в настройках. Это можно сделать так:
Параметр «Для разработчиков» появится новой записью в меню после соответствующего уведомления.
Как отключить анимацию
Перейдите в него и прокрутите вниз до раздела «Рисование». В нем найдите три параметра:
Присвойте им значения в соответствии с вашими предпочтениями. Если анимация необходима, то сделайте выбор от 0,5х до 10х. Чем больше значение установите, тем более гладко будут отображаться переходы.
Для того, чтобы заставить смартфон быстрее работать и меньше использовать ресурсы батареи, во всех трех параметрах установите значение «Отключить». Проверьте работу гаджета. Результат впечатляет?
Зачем отключать анимацию.
Сейчас даже бюджетные современные смартфоны на базе операционной системы Android работают достаточно быстро и шустро, но как быть миллионам людей, которые купили себе телефон немного лет назад- тогда еще не было мощных недорогих процессоров? Как стало известно, достаточно многие обладатели мобильных телефонов на Android жалуются на лаги и медленную скорость работы системы, существует скрытая настройка, которая есть во всех версия операционной системы от Google, что позволяет ощутимо повысить производительность смартфона.
Операционная система Android накачана различными анимациями и красивыми переходами, на отрисовку которых процессор тратит значительную часть своих ресурсов, а вместе с тем и тратит энергию батарейки, которую (затраты энергии) мы и так стараемся оптимизировать различными способами. Но к счастью, скрытая настройках во всех Android-смартфонах ощутимо повышает скорость работы путем отключения системных анимаций. В итоге интерфейс станет значительно более отзывчивым, а мобильное девайс станет работать ощутимо быстрее.
Для этого Вам необходимо зайти в «Настройки» и перейти в раздел «Батарея и производительность». В самом низу должен отображаться раздел «Системные анимации», который и требуется открыть. Здесь выбираем вариант «Не показывать системные анимации», обычно требуется перезагрузка смартфона для вступления изменений в силу. Но если такой настройки нет, то не стоит отчаиваться, поскольку во многих мобильных устройствах на Android, в зависимости от прошивки, она спрятана от посторонних глаз.
И так, чтобы отключить данные анимации необходимо открыть раздел «О телефоне» в настройках и семь раз нажать на раздел «Номер сборки», в результате чего появится сообщение «Вы стали разработчиком». Далее следует вновь вернуться на главную страницу настроек там появится раздел «Для разработчиков» и зайти в него. Здесь в подразделе «Рисование» должно быть три настройки – «Анимация переходов», «Длительность анимации» и «Анимация окон». Их необходимо перевести в состояние «Без анимации», после чего желательно перезагрузить Android-смартфон.
Если Вы все сделали правильно, то системная анимация при выполнении любых действий должна пропасть, а все задачи будут выполняться ощутимо быстрее, за счет чего скорость работы вашего Android-смартфонов увеличится. Эта скрытая от посторонних глаз настройка есть в каждом мобильном устройстве, работающим на ОС от Google (Android), поэтому способ по увеличению скорости работы Вашего смарта является достаточно универсальным.
Анимированные переходы в мобильных приложениях
Изображение: Ramotion
Анимация играет важную роль во взаимодействии с пользователями. Например, в мобильных приложениях с её помощью можно передать очень многое. Когда вы отправляете сообщение, открываете раздел настроек, ставите флажок или переходите на другую страницу, на экране происходят изменения. Анимация таких изменений — это удобный способ отображения действий пользователя.
В этой статье мы рассмотрим несколько типичных случаев, когда функциональная анимация дополняет визуальный дизайн и поддерживает взаимодействие пользователя с интерфейсом.
Осторожно: под катом много тяжёлых гифок.
Оповещения о состоянии системы
Если пользователь выполняет в системе какое-то действие, он ожидает увидеть чёткое и понятное подтверждение, что его запрос принят и обрабатывается. Вот несколько примеров того, как анимация позволяет повысить качество взаимодействия с пользователем.
Уведомите пользователей о результатах их действий. Изображение: Колин Гарвен (Colin Garven)
Простая анимация помогает пользователям понять, что происходит. Изображение: 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)
Заключение
Если подойти к использованию анимации вдумчиво, её возможности окажутся поистине огромными. С её помощью можно оживить интерфейсы, сделав их по-настоящему «отзывчивыми» к действиям пользователя, и решить множество функциональных проблем. Для чего бы ни было предназначено ваше приложение, оно будет тесно взаимодействовать с пользователем. И именно анимация поможет сделать это взаимодействие по-настоящему захватывающим и эффективным.
Создание анимаций переходов между Activity в Android
Начиная с Android 4.4 в арсенале разработчиков появился дополнительный инструмент для создания анимаций — Transitions Framework. Изначально он предназначался для создания анимаций изменения состояния приложения путём манипулирования несколькими View. С выходом Android 5.0 набор доступных для использования анимаций был расширен, чтобы соответствовать представленной тогда же концепции Material Design.
Transitions Framework позволяет быстро и безболезненно создавать различные анимации. Поэтому в процессе работы над iFunny было невозможно пройти мимо этого инструментария. Вниманию читателей предлагается частный случай использования Transitions API — создание анимации перехода между Activity с эффектом «бесшовности».
С визуальной точки зрения представленные в Transitions Framework анимации переходов между Activity можно условно разделить на два типа: обычные анимации и анимации с общим элементом. Концепт анимации с общим элементом продемонстрирован на честно украденном с сайта developer.android.com рис. 1. На нём в роли общих элементов выступают аватар и имя контакта.
Рис. 1. Анимация перехода между Activity с общими элементами
Но никто не любит длинные вступления, поэтому сразу перейдём к рассказу о том, как создавались анимации данного типа в приложении iFunny. В качестве первого примера рассмотрим анимацию, показанную на рис. 2. Для её использования нам потребуется Android версии 5.0 и выше.
Рис. 2. Анимация перехода между Activity на экране аутентификации пользователя
С точки зрения пользователя, здесь нет ничего необычного: один экран, простенькая анимация. Но, как вы уже могли догадаться, «под капотом» — переход между двумя экранами с одним общим элементом.
Первым шагом к созданию подобного перехода является, как ни странно, выбор этого самого элемента и определение его местоположения в вёрстке обеих Activity. После этого в описание каждого View, отображающего выбранный элемент, нужно добавить атрибут android:transitionName, а также назначить им android:id, если таковой отсутствует.
В нашем случае это обычные ImageView следующего вида:
Здесь стоит отметить два важных момента. Во-первых, в обоих ImageView необходимо установить одинаковые transitionName, что логично. Во-вторых, коль скоро мы используем ImageView, то и содержимое у них должно быть одним и тем же, поскольку использование двух отличающихся ресурсов может привести к неожиданным последствиям (как минимум к морганию анимируемого View в начале и конце анимации).
На втором шаге необходимо добавить опции для запускаемой (второй) Activity, сообщающие о том, что при её запуске должна быть запущена анимация.
Примечание. Под «второй» подразумевается запускаемая Activity, переход к которой должен быть осуществлён, а под «первой» — запускающая Activity.
Делается это следующим образом:
В приведённом листинге:
На третьем шаге необходимо описать анимацию перехода, т.е. указать путь, проходимый анимируемым View, и трансформацию самого View. Для этого создадим отдельный файл projectName/src/main/res/transitions/email_auth_transition.xml со следующим содержимым:
Немного теории. Тег transitionSet предназначен для описания сразу нескольких трансформаций, применяемых к анимируемому View. Параметр transitionOrdering отвечает за порядок применения этих трансформаций. В нашем случае они применяются одновременно. Существует несколько типов готовых трансформаций, представленных в Transitions Framework. С полным списком можно ознакомиться на этой странице. Мы же остановимся на двух конкретных: changeBounds и changeImageTransform.
Первая предназначена для трансформации размера View. Вторая работает только с ImageView и в связке с первой позволяет изменять не только размер, но и форму ImageView. Использовав данные трансформации, получаем на выходе анимацию изменения размера изображения, представленную на рис. 2. Если не указывать тип движения анимируемого View, то он будет двигаться по кратчайшему пути. Более интересный способ передвижения рассмотрим во втором примере.
Последним шагом создания анимации является её объявление в темах обеих Activity. Для этого отредактируем описание тем следующим образом (или создадим новые в папке projectName/src/main/res/values-v22/theme.xml):
Итак, для создания анимации перехода от Activity к Activity необходимо:
Рис. 3. Анимация перехода из комментариев к профилю пользователя
Все шаги по созданию перехода, рассмотренные выше, также подходят для этой анимации. А вот трансформация общего элемента реализована немного иначе. В приведённом ниже листинге описано перемещение общего элемента «по дуге» вместе с изменением его размера.
В чём же сложность второго примера? В первом случае использовалось изображение из ресурсов самого приложения, а тут — картинка загружается из сети. К тому же для комментариев изображение аватара пользователя берётся в более низком разрешении, чем для профиля. Поэтому требуется не только дать второй Activity доступ к изображению, используемому в первой, но и по завершении анимации подгрузить требуемое изображение в более высоком качестве. Так и получается две проблемы.
Для решения первой можно было бы собственноручно закэшировать изображение на диск или же передать его адрес в параметре второй Activity. Однако решение данной проблемы переложили на используемую в приложении библиотеку для загрузки изображений — Glide. При загрузке изображения достаточно просто добавить параметр diskCacheStrategy(DiskCacheStrategy.SOURCE), и оно будет закэшировано самой библиотекой (актуально для Glide версии 3.x). Следовательно, при повторном обращении к данному ресурсу из второй Activity будет использоваться кэшированный файл, что поможет нам избежать моргания анимируемого ImageView.
Вторая проблема также решается достаточно просто. В то время как осуществляется анимация перехода, профиль пользователя вместе с аватаром в более высоком разрешении скачиваются из сети и ожидают её завершения. Как только выполняются оба условия (завершение анимации и завершение загрузки), аватар пользователя обновляется. Добиться такого поведения можно, если использовать специальный Listener, в котором реализованы колбэки, вызываемые при смене статуса анимации. Для этого во Fragment, который принадлежит второй Activity, зададим этот самый Listener:
Здесь происходит следующее:
В методе onProfileUpdated() мы обновляем содержимое профиля, в т.ч. и аватар.
Стоит отдельно упомянуть случай, когда общий элемент уходит за пределы экрана. Особенность его состоит в том, что, вопреки (а может, и согласно) логике, анимация перехода всё равно будет выполнена и будет смотреться достаточно забавно (рис. 4).
Рис. 4. Анимация возвращения из профиля в комментарии
Чтобы избежать подобного поведения, достаточно в момент ухода общего элемента за пределы экрана выставить ему видимость, отличную от View.VISIBLE.
В целом можно сказать, что Transitions Framework является простым и мощным инструментом для создания анимаций. Он не ограничивается только анимациями перехода между Activity — в статье был рассмотрен лишь частный случай его использования. Также стоит отметить, что помимо предоставляемых трансформаций имеется возможность создавать свои собственные, но это уже совсем другая история, достойная отдельного поста.
Анимация переходов android что это
Практическое применение
Для начала нужно включить отображение Transitions, либо в стилях:
Далее необходимо задать эффекты (типы Transition). Опишу самые распространенные:
— ChangeBounds: отвечает за изменение координат и размеров элементов внутри лэйаута;
— Fade: плавное появление (Fade.IN) или исчезновение (Fade.OUT) элемента;
Кроме этого всегда можно написать свой собственный Transition, который не будет иметь ничего общего с вышеперечисленными.
Я решил повторить эффект с рисунка 2 (ниже). В моем случае понадобились эффекты changeBounds и changeImageTransform.
Далее верстаем два лэйаута (layout). У view, которые будут подвергнуты анимации, необходимо задать параметр transitionName, он задается на обоих лэйаутах одинаковый, тем самым обозначаются начальная и конечная сцены.