Анимация Hero
"Hero" - это виджет, который плавно переходит с одного экрана на другой. Например, на странице списка продуктов нажатие на изображение продукта запускает плавную анимацию, где изображение летит на новый экран, открывая подробную информацию о продукте.
Создание анимации Hero
Давайте посмотрим, как создать анимацию Hero с примером, который выглядит так:
Для создания анимации Hero вам потребуется как минимум две страницы, которые используют одно и то же изображение.
Шаги для создания такого примера следующие:
-
На первой странице выберите изображение, перейдите на панель свойств, включите Использовать анимацию Hero и Добавьте тег Hero.
-
На второй странице выберите изображение, перейдите на панель свойств, включите Использовать анимацию Hero и выберите Тег Hero, который вы создали на компоненте первой страницы.
-
Добавьте навигационное действие с первой страницы на вторую.
Анимация Hero на компоненте
Вы также можете добавить анимацию Hero на пользовательский компонент. Давайте посмотрим, как построить пример, который выглядит так:
Перед тем как начать,
- Убедитесь, что у вас есть компонент, добавленный на обе страницы.
- Для более плавного и привлекательного эффекта анимации Hero убедитесь, что компоненты на обеих страницах имеют схожий внешний вид. Это улучшит общее визуальное впечатление от анимации.
Шаги для добавления анимации Hero на компоненте следующие:
-
На первой странице выберите компонент, перейдите на панель свойств, включите Использовать анимацию Hero и Добавьте тег Hero.
-
На второй странице выберите компонент, перейдите на панель свойств, включите Использовать анимацию Hero и выберите Тег Hero, который вы создали на компоненте первой страницы.
-
Добавьте навигационное действие с первой страницы на вторую.
ЧаВО
Почему анимация Hero не работает при переходе вперед? Работает только назад
Это потому, что изображение на второй странице не существует на самом первом кадре. Анимация Hero сработает только тогда, когда изображение загружено из ресурса или из сети (если путь был заранее указан). Если вы загружаете изображение из документа Firestore, оно может не быть готово к моменту анимации.
Для исправления этой проблемы вы можете избежать загрузки изображения непосредственно из Firestore. Вместо этого вы можете передавать URL изображения (который уже был получен из Firestore) со страницы на страницу. И затем использовать этот URL для загрузки изображения.
Посмотрите, как передавать данные с одной страницы на другую.