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

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

08.11.15 12:57 •
AStefanovskiy •
# 270361 •
Хабрахабр •
Переклад •
10 •

- такий же як Forbes, тільки краще.

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

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

Якщо ви бажаєте побачити, що вийшло - готове додаток знаходиться на GitHub.

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

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

Для асоціації View на першому екрані і його двійника на другому потрібна зв'язок. Lollipop пропонує використовувати властивість "transition name" для зв'язку View між собою.

Існує два способи додавання імені переходу (transition name) для ваших View:

У коді можна використовувати ViewCompat.setTransitionName (). Звичайно, ви так само можете просто викликати setTransitionName (). якщо підтримка починається з Lollipop.
Щоб додати до XML, використовуйте атрибут android: transitionName.

Важливо відзначити, що всередині одного макета (layout), імена переходів повинні бути унікальні. Тримайте це в умі при організації переходів. Вказуючи transition name для ListView або RecyclerView задасть це ж ім'я і для всіх інших елементів.

Налаштування 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.

Код який в результаті у нас вийшов виявився досить простим:

От і все! Простий спосіб реалізації анімації переходів між двома фрагментами готовий!

Чесно кажучи завжди дратувала ця анімація в новому Андроїд. Вона не має ніякого реального сенсу, так як ми розуміємо, що в реальному світі та чи інша картка, або об'єкт не може плавно з'явитися, або ж випаруватися.
Тоді яку анімацію треба вставити? Я особисто не знаю. Був би дуже радий почути відповідь на моє запитання від професійних дизайнерів, та й взагалі від кого завгодно :)

В Біблії викладено сценарій анімації.
1. Спочатку було слово. (Label)
...
Плюс 10 поправок від Діснея.

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

А по суті - я б рекомендував використовувати покращений ефект - не зміну, а перетворення картинки. і то, в більш схожих картинках. було б ближче до середньовічного чаклунства :)

Така анімація вкрай сумнівна для Material design. Все, що може відбуватися, описано в Гайд від гугла. Куди логічніше буде розглядати фото як картку, яка спочатку масштабується разом з фото, а потім розтягується окремо (тільки фон), і вже на порожньому її місці відображається текст.