Когда изображение перелетает с одного экрана на другой, это называется анимацией героя. Hero относится к виджету, который летает между экранами, т.е. Image или CircleImage. Анимация Hero Animation трансформирует форму изображения, пока оно перелетает с одного экрана на другой.

Например, на странице, где показан список товаров, при нажатии на изображение товара изображение перелетает на новый экран, где показана подробная информация о товаре.

На этой странице вы узнаете, как создать простую анимацию героя, которая выглядит следующим образом:

хе 1

Ниже приведены шаги по созданию анимации героя:

  1. Добавить изображение на первую страницу
  2. Добавьте изображение на вторую страницу
  3. Добавьте тег Hero к первому изображению
  4. Добавьте тег Hero ко второму изображению
Создание анимации героя требует наличия как минимум двух страниц с одним и тем же изображением.

Построить такой пример можно следующим образом:

  • На первой странице выберите изображение, перейдите на панель свойств, включите опцию Использовать анимацию Hero и Добавить тег Hero.

Видео:https://www.loom.com/share/c20e589a20dd4dbfbcb975bf45af286e?sid=07badf8a-c932-4fa9-a585-60c5f1301115

  • На второй странице выберите изображение, перейдите на панель свойств, включите опцию Использовать анимацию Hero и выберите тег Hero, созданный на первом компоненте страницы.

Видео:https://www.loom.com/share/8e51cd2ca0fb490cbf9ee607f07c8440?sid=7f87bb69-6d1e-48a8-810c-fe1b396319fe

Добавить действие навигации со страницы 1 на страницу 2.

Анимация героя на компоненте

Также можно добавить анимацию героя на пользовательский компонент. Рассмотрим, как построить пример, похожий на приведенный ниже:

Видео:https://www.loom.com/share/cf8980ca68074fd0a24ce2fbef3e0a11?sid=7d382dfc-8115-4b59-a633-e42e147b7f73

Перед началом работы,

  • Убедитесь, что компонент добавлен и на первую, и на вторую страницу.
  • Чтобы эффект анимации героя был более плавным и привлекательным, убедитесь, что компоненты на обеих страницах имеют несколько схожий вид. Это усиливает общее визуальное воздействие анимации.

Добавление анимации героя в компонент выполняется следующим образом:
На первой странице выберите компонент, перейдите на панель свойств, включите опцию Использовать анимацию Hero и Добавьте тег Hero.

Видео:https://www.loom.com/share/089421c9e8cd4053b8eb1e3b920c6d0b?sid=c367cc40-c0c4-49e8-9e22-40acfc2f25d2

  • Добавить действие навигации со страницы 1 на страницу 2.

Видео:https://www.loom.com/share/b91c91d118bb4a12ab08cd272afb54a8?sid=bb7e53b5-0cbe-482a-be7a-ceb6b692513f

  • Выберите на второй странице компонент, перейдите на панель свойств, включите опцию Использовать анимацию Hero и выберите тег Hero, созданный на компоненте первой страницы.

1. Добавьте изображение на первую страницу

Вы можете пропустить этот пункт, если у вас уже есть изображение на первой странице.

Чтобы добавить изображение:

  1. Создайте/выделите первую страницу.
  2. Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.

Вы можете пропустить этот пункт, если у вас уже есть изображение на первой странице.

Чтобы добавить изображение:

  1. Создайте/выделите первую страницу.
  2. Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
хе 2

2. Добавление изображения на вторую страницу

Вы можете пропустить этот пункт, если у вас уже есть изображение на второй странице.

Чтобы добавить изображение:

  1. Создайте/выделите вторую страницу.
  2. Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
  3. Установите его ширину на бесконечность, нажав на значок бесконечности (), а высоту — на 250.
  4. Найдите свойство Path и введите тот же URL, что и у изображения на первой странице.
Убедитесь, что на обеих страницах отображается одно и то же изображение.
хе 3

3. Добавьте тег Hero Tag к первому изображению

Тег Hero Tag используется анимацией Hero Animation для идентификации изображений на двух разных страницах.

Два изображения на разных страницах должны иметь общий тег Hero Tag.

Чтобы добавить тег героя к первому изображению:

  • Выберите изображение в дереве виджетов или в области холста.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Изображение.
  • Установите флажок Использовать анимацию героя (щелкните по нему). Если путь изображения задан из переменной, путь изображения будет использован в качестве тега героя, и вы можете пропустить следующий шаг.
  • В раскрывающемся списке Hero Tag нажмите на Unset, а затем выберите + Add Hero Tag. Откроется всплывающее окно.
  • Введите имя тега героя.
  • Нажмите Добавить. Созданный тег Hero Tag будет добавлен к изображению.
хе 4

4. Добавьте тег героя ко второму изображению

Чтобы добавить тег героя ко второму изображению:

  • Выберите изображение в дереве виджетов или в области холста.
  • Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение».
  • Установите флажок Использовать анимацию героя (щелкните по нему). Если путь изображения задан из переменной, путь изображения будет использован в качестве тега героя, и вы можете пропустить следующий шаг.
  • В раскрывающемся списке Hero Tag нажмите на Unset, а затем выберите тег героя, который вы присвоили изображению на первой странице.
хе 5

Вопросы и ответы

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

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

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

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