Посібник для початківців щодо впровадження анімації Android (частина 2)

У частині 1 ми обговорили основи анімацій та анімації власності. У цій публікації я розповім про перегляд анімацій та нову рамку переходів діяльності, запроваджену на рівні 21 API. Перехідний фрейм був уже доданий у рівні API 19 (4.4.2), але він став більш потужним на рівні 21 API.

Рамки для Android почалися з анімаційних зображень, але через їх проблеми вони представили анімації властивостей, як це обговорювалось у частині 1. Перегляд анімації ідеально підходить для анімації екранного екрану та інших областей, де немає такої взаємодії з поданням. У більшості випадків вони реалізуються за допомогою XML-коду.

Типи анімаційних зображень

  1. Анімація Tween - це анімація, застосована до подання, яке відповідає за масштабування, переклад, обертання або зменшення перегляду (разом або по одному).
  2. Кадрова анімація - ці анімації застосовуються за допомогою різних малюнків. У цьому нам просто потрібно вказати список малюнків у XML-коді, і анімація працює так само, як кадри відео.

Перегляд анімацій не дуже використовується, тому що те саме можна використовувати об’єкт ViewPropertyAnimator, який набагато швидший і читабельніший. Кадрова анімація схожа на Dravable Animation. Важливіше - зрозуміти нову рамку переходу, яка є дуже корисною та забезпечує прекрасну анімацію.

Нова анімація (API рівня 21+)

Хіба це не круто?

Android забезпечує переходи активності, фрагменти та загальні елементи переходів. Інші анімації - круговий розкриття, ефект пульсацій тощо, вигнутий рух. Ефект Ripple можна застосувати, просто встановивши властивість фону подання як:

android: background = ”? attr / selectableItemBackground”

Тут ми спробуємо переходи активності та переходи спільних елементів так само, як вище GIF.

Основний крок - створити файл style-v21 і зробити наступні дії:

Пояснення вищезазначених стилів-v21.xml

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

Класно ... Але як ця річ працює?

В основному тут проводяться 2 заходи. Один з маленькою крапкою, а інший з великою крапкою та текстом. Коли я натискаю кнопку в пункті Активність A, вона відкриває активність B з анімацією. Цей ефект також можна побачити в додатку Google Play Store. Але вони також застосовують кругові виявлення, ефекти руху дуги. Найголовніше тут помітити, що зображення НЕ переміщується з вихідної позиції в кінцеву позицію. Рамка переходу обчислює початкову сцену і кінцеву сцену, а потім анімує між цими сценами. Для того, щоб знати, як працює анімація, це стосується цього. Також за допомогою нового механізму намірів це досягається, як показано нижче:

Тут я використав перевірку API для льодяника, а потім запустив перехід, а на інших рівнях активність розпочнеться нормально. Нова пара <> допомагає системі знати про спільні елементи.

Примітка - збережіть назву переходу однаково в обох видах (мала та велика крапка). Це допомагає системі знати спільні елементи. Хороша річ - розмістити ім’я переходу у strings.xml.

Тут я використовував перехід custom_animation.xml для переходу активності, який є ефектом вибуху. Більше того, я виключив деякі погляди для участі в анімації. Ці представлення - це смуга стану та панель інструментів. Ми можемо використовувати різні види ефектів (зникати, слайд), щоб відповідати нашому випадку використання.

Переходи діяльності - рівень 21 API ввів більш реалістичні та зручні для користувача переходи. Наприклад, переходи Explode, ChangeImageTransform виглядають більш реалістичними та краще керують користувача потоком діяльності. У нашому прикладі вище я використав перехід зникає, який надає система Android. Якщо ми не вказуємо жодної анімації, то за замовчуванням використовується AutoTransition. Ми можемо створити власний перехід, створивши спеціальний клас, який розширює Transition. Дивіться це для довідки.

Кругове розкриття

Круговий ефект виявлення

Наведений вище круговий ефект виявлення створюється при натисканні на FAB:

Дякуємо, що прочитали статтю. Пропозиції / виправлення / коментарі завжди вітаються. Якщо вам це подобається, натисніть кнопку "подобається" та поділіться статтею із спільнотою Android. Давайте поділимось знаннями, наскільки можемо.

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