Когда изображение перелетает с одного экрана на другой, это называется анимацией героя. Hero относится к виджету, который летает между экранами, т.е. Image или CircleImage. Анимация Hero Animation трансформирует форму изображения, пока оно перелетает с одного экрана на другой.
Например, на странице, где показан список товаров, при нажатии на изображение товара изображение перелетает на новый экран, где показана подробная информация о товаре.
На этой странице вы узнаете, как создать простую анимацию героя, которая выглядит следующим образом:
Ниже приведены шаги по созданию анимации героя:
- Добавить изображение на первую страницу
- Добавьте изображение на вторую страницу
- Добавьте тег Hero к первому изображению
- Добавьте тег 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. Добавьте изображение на первую страницу
Вы можете пропустить этот пункт, если у вас уже есть изображение на первой странице.
Чтобы добавить изображение:
- Создайте/выделите первую страницу.
- Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
Вы можете пропустить этот пункт, если у вас уже есть изображение на первой странице.
Чтобы добавить изображение:
- Создайте/выделите первую страницу.
- Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. Добавление изображения на вторую страницу
Вы можете пропустить этот пункт, если у вас уже есть изображение на второй странице.
Чтобы добавить изображение:
- Создайте/выделите вторую страницу.
- Перетащите виджет Image с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
- Установите его ширину на бесконечность, нажав на значок бесконечности (), а высоту — на 250.
- Найдите свойство Path и введите тот же URL, что и у изображения на первой странице.
3. Добавьте тег Hero Tag к первому изображению
Тег Hero Tag используется анимацией Hero Animation для идентификации изображений на двух разных страницах.
Чтобы добавить тег героя к первому изображению:
- Выберите изображение в дереве виджетов или в области холста.
- Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Изображение.
- Установите флажок Использовать анимацию героя (щелкните по нему). Если путь изображения задан из переменной, путь изображения будет использован в качестве тега героя, и вы можете пропустить следующий шаг.
- В раскрывающемся списке Hero Tag нажмите на Unset, а затем выберите + Add Hero Tag. Откроется всплывающее окно.
- Введите имя тега героя.
- Нажмите Добавить. Созданный тег Hero Tag будет добавлен к изображению.
4. Добавьте тег героя ко второму изображению
Чтобы добавить тег героя ко второму изображению:
- Выберите изображение в дереве виджетов или в области холста.
- Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Изображение».
- Установите флажок Использовать анимацию героя (щелкните по нему). Если путь изображения задан из переменной, путь изображения будет использован в качестве тега героя, и вы можете пропустить следующий шаг.
- В раскрывающемся списке Hero Tag нажмите на Unset, а затем выберите тег героя, который вы присвоили изображению на первой странице.
Вопросы и ответы
Почему анимация героя не работает при навигации вперед? Работает только в обратном направлении
Это связано с тем, что изображение на второй странице не существует на первом кадре. Анимация Hero будет работать только в том случае, если изображение загружено из актива или из сети (если путь к нему заранее определен). Если изображение загружается из документа Firestore, то оно может быть не готово к моменту начала анимации.
Чтобы решить эту проблему, можно не загружать изображение непосредственно из Firestore. Вместо этого можно передать URL-адрес изображения (которое уже было получено из Firestore) с предыдущей страницы на вторую. А затем использовать этот URL для загрузки изображения.
Смотрите, как передавать данные с одной страницы на другую.