Hero-анимация
Hero-анимация переносит виджет с одного экрана на другой: нажали на фото товара в списке — оно «перелетело» на карточку товара и встало на своё место.
Как настроить
Разберём на примере:
Нужны две страницы, на которых есть одна и та же картинка.
Порядок такой:
-
На первой странице выделите картинку, в панели свойств включите Use Hero Animation и нажмите Add Hero Tag.
-
На второй странице выделите картинку, включите Use Hero Animation и выберите Hero Tag, созданный на первой странице.
-
Добавьте переход с первой страницы на вторую.
Hero-анимация на компоненте
Так же переносится и собственный компонент:
Перед началом:
- компонент должен быть добавлен на обе страницы;
- оформление компонента на обеих страницах должно быть похожим — иначе переход выглядит не как перелёт, а как подмена.
Порядок тот же:
-
На первой странице выделите компонент, включите Use Hero Animation и нажмите Add Hero Tag.
-
На второй странице выделите компонент, включите Use Hero Animation и выберите созданный Hero Tag.
-
Добавьте переход с первой страницы на вторую.
Частые вопросы
Почему анимация работает только на возврате, а вперёд — нет?
Потому что на второй странице картинки нет в первом же кадре. Hero-анимация срабатывает, только когда изображение берётся из ресурсов проекта или по заранее известному адресу. Если адрес приходит из документа Firestore, к моменту начала анимации его ещё нет.
Лечится тем, что картинку не загружают из Firestore прямо на второй странице: адрес, уже полученный на первой, передают параметром — и по нему грузят изображение.