В Части 1 мы обсудили основы анимации и анимацию свойств. В этом посте я расскажу о View Animations и новой структуре переходов действий, представленной на уровне API 21. Структура перехода уже была добавлена ​​в API уровня 19 (4.4.2), но она стала более мощной на уровне API 21.

Платформа Android началась с анимации просмотра, но из-за своих проблем они представили анимацию свойств, как обсуждалось в части 1. Анимация просмотра идеально подходит для анимации экрана-заставки и других областей, где нет такого взаимодействия с представлением. В большинстве случаев они реализуются с использованием кода XML.

Типы анимации просмотра

  1. Анимация анимации - это анимация, применяемая к виду, которая отвечает за масштабирование, перемещение, поворот или затухание вида (вместе или по одному).
  2. Анимация кадра - эти анимации применяются с использованием различных чертежей. Здесь нам просто нужно указать список чертежей в XML-коде, и анимация будет работать так же, как кадры видео.

Анимации просмотра используются нечасто, потому что то же самое можно использовать с помощью объекта ViewPropertyAnimator, который намного быстрее и удобочитаем. Кадровая анимация аналогична рисованной анимации. Более важно понимать новую структуру Transition, которая очень полезна и обеспечивает красивую анимацию.

Новые анимации (уровень API 21+)

Android предоставляет переходы действий, переходы фрагментов и переходы общих элементов. Другие анимации - это круговое раскрытие, эффект ряби и т. Д., Криволинейное движение. Эффект ряби можно применить, просто установив свойство фона представления как:

android: background = ”? attr / selectableItemBackground”

Здесь мы опробуем переходы действий и переходы общих элементов, как указано выше в GIF.

Основной шаг - создать файл styles-v21 и выполнить следующие действия:

Общие переходы элементов - здесь есть общее представление между двумя действиями / фрагментами. Общее представление означает, что оба представления одинаковы в обоих действиях, просто их размеры немного отличаются. Например, изображение в элементе просмотра ресайклера, которое при нажатии (касании) показывает детали элемента с тем же изображением, но большего размера. Сделаем что-то вроде этого: -

Круто… Но как эта штука работает?

В основном здесь есть 2 занятия. Один с маленькой точкой, а другой с большой точкой и текстом. Когда я нажимаю кнопку в Activity A, открывается Activity B с анимацией. Этот эффект также можно увидеть в приложении Google Play Store. Но они также применяют эффекты кругового откоса и движения дуги. Здесь самое важное: изображение НЕ перемещается из исходного положения в конечное. Платформа перехода вычисляет начальную и конечную сцены, а затем выполняет анимацию между этими сценами. Чтобы узнать, как работают анимации, обратитесь к this. Это также возможно с помощью нового механизма намерений, как показано ниже:

Здесь я использовал проверку API на наличие леденца на палочке, а затем запустил переход, и на других уровнях действие начнется нормально. Новая строка Pair ‹› помогает системе узнать об общих элементах.

Примечание. Сохраняйте имя перехода одинаковым в обоих представлениях (маленькая и большая точка). Это помогает системе узнать общие элементы. Лучше всего поместить имя перехода в strings.xml.

Здесь я использовал custom_animation.xml переход для перехода активности, который представляет собой эффект взрыва. Более того, я исключил некоторые просмотры для участия в анимации. Этими представлениями являются statusBar и панель инструментов. Мы можем использовать разные виды эффектов (затухание, скольжение) в соответствии с нашим вариантом использования.

Переходы между действиями. Уровень API 21 представил более реалистичные и удобные переходы между действиями. Например, переходы Взрыв, ChangeImageTransform кажутся более реалистичными и лучше направляют пользователя в поток действий. В нашем примере выше я использовал плавный переход, который предоставляется системой Android. Если мы не указываем никакой анимации, то по умолчанию используется Автопереход. Мы можем создать собственный переход, создав собственный класс, расширяющий Transition. См. This для справки.

Круговое раскрытие

Вышеупомянутый эффект кругового раскрытия создается при нажатии FAB:

Спасибо, что прочитали статью. Предложения / исправления / комментарии всегда приветствуются. Если вам это нравится, нажмите кнопку «Нравится» и поделитесь статьей с сообществом Android. Давайте поделимся знаниями как можно больше.

Также давайте подружимся на About.me, Twitter, LinkedIn, Github и Facebook.