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

Анимации виджетов

Widget animations позволяют добавлять эффекты анимации на уровне виджетов. Чтобы добавить анимацию к виджету, вам нужно перейти в панель свойств для виджета и выбрать вкладку анимации.

animation-properties.png

Обзор анимации

Эффекты анимации и свойства

FlutterFlow поддерживает различные эффекты анимации и свойства для анимации виджетов.

Большинство анимаций имеют основные свойства, которые можно редактировать, такие как Duration, который указывает длительность анимации, и Delay, который указывает задержку перед началом анимации.

Кроме того, есть специфические для анимации свойства, которые обычно имеют начальное и конечное значение, которые упомянуты в таблице ниже.

...

Кривые анимации

При применении анимации вы также сможете указать кривую. Кривая анимации в основном является математической формулой, используемой для интерполяции значений со временем. Изменение кривой анимации позволяет контролировать скорость и стиль анимации.

...

Анимация при загрузке страницы

Существует много случаев, когда может потребоваться запустить анимацию при загрузке страницы или виджета на экран.

Рассмотрим пример использования в электронной коммерции, когда запрос к серверу используется для извлечения списка популярных товаров. Может быть некоторая задержка между первоначальной загрузкой страницы и отображением фактических результатов. Чтобы улучшить опыт пользователя, мы можем добавить некоторые анимации, чтобы пользователи знали, когда контент загружается.

...

...

Назначение множественных анимаций

Вы можете применить несколько анимаций к одному виджету. По умолчанию, когда вы добавляете несколько анимаций, они выполняются последовательно (одна за другой), создавая стаггерированную анимацию. Однако, вы можете настроить, чтобы все анимации выполнялись одновременно.

...

...

Установка значений анимации из переменных

Вы можете динамически устанавливать значения анимации с использованием переменных вашего приложения. Эта гибкость позволяет создавать более сложные анимации.

...

...