Перейти к основному содержимому

Анимация Hero

Виджет «Hero» обеспечивает плавный переход от одного экрана к другому. Например, на странице списка товаров при клике на изображение продукта запускается плавная анимация, в ходе которой изображение «перелетает» на новый экран с подробной информацией о товаре.

Создание анимации Hero​

Рассмотрим, как создать анимацию Hero на примере, похожем на приведенный ниже:

hero-animation-image-widget.gif

к сведению

Для создания анимации Hero требуется наличие как минимум двух страниц с общим изображением.

Шаги для создания такого примера следующие:

  1. На первой странице выберите изображение, перейдите в панель свойств, включите Use Hero Animation и Add Hero Tag.

  2. На второй странице выберите изображение, перейдите в панель свойств, включите Use Hero Animation и выберите Hero Tag, созданный для компонента на первой странице.

  3. Добавьте действие навигации с первой страницы на вторую.

Анимация Hero для компонента​

Анимацию Hero также можно применить к пользовательскому компоненту. Рассмотрим, как создать пример, похожий на приведенный ниже:

Перед началом убедитесь в следующем:

  • На обеих страницах (первой и второй) добавлен компонент.
  • Для более плавного и привлекательного эффекта анимации Hero компоненты на обеих страницах должны иметь примерно одинаковый внешний вид. Это усилит общее визуальное воздействие анимации.

Шаги для добавления анимации Hero к компоненту следующие:

  1. На первой странице выберите компонент, перейдите в панель свойств, включите Use Hero Animation и Add Hero Tag.

  2. На второй странице выберите компонент, перейдите в панель свойств, включите Use Hero Animation и выберите Hero Tag, созданный для компонента на первой странице.

  3. Добавьте действие навигации с первой страницы на вторую.

Часто задаваемые вопросы​

Почему анимация Hero не работает при переходе вперед? Работает только назад

Это происходит потому, что изображение на второй странице отсутствует в первом кадре. Анимация Hero сработает только в том случае, если изображение загружается из ассета или из сети (если путь указан заранее). Если изображение загружается из документа Firestore, оно может не успеть загрузиться к моменту запуска анимации.

Чтобы решить эту проблему, избегайте прямой загрузки изображения из Firestore. Вместо этого передайте URL изображения (который уже был получен из Firestore) с предыдущей страницы на вторую. Затем используйте этот URL для загрузки изображения.

См., как передавать данные с одной страницы на другую.