Анимации виджетов
Анимации виджетов позволяют добавлять эффекты анимации на уровне виджета. Чтобы добавить анимацию к виджету, перейдите в панель свойств виджета и выберите вкладку анимаций.
Эффекты анимации и свойства
FlutterFlow поддерживает разнообразные эффекты анимации и свойства для анимаций виджетов.
Большинство анимаций имеют основные свойства, которые можно редактировать, например Duration, определяющее, как долго должна длиться анимация, и Delay, указывающее задержку перед началом анимации.
Кроме того, существуют свойства, специфичные для анимации, которые обычно имеют начальное и конечное значения, как указано в таблице ниже.
| Effect | Description | Example | Effect-Specific properties |
|---|---|---|---|
| Fade | Постепенно показывает или скрывает виджет. Широко используется для плавного ввода элементов на экран и для фокусировки внимания пользователя путём затухания или появления содержимого или элементов интерфейса. |  | Opacity: начальная или конечная видимость виджета, где 0 — полностью прозрачный, а 1 — полностью видимый |
| Slide | Изменяет положение виджета на экране. Обычно используется для динамичного и визуально привлекательного ввода виджета, например для слайд-меню, страниц или уведомлений. FlutterFlow поддерживает как вертикальный, так и горизонтальный слайд. |  | Position: где 0 — текущее положение виджета, -100 — на 100 пикселей влево (горизонтально) или вниз (вертикально), а 100 — на 100 пикселей вправо (горизонтально) или вверх (вертикально). Чтобы виджет появлялся и исчезал за пределами экрана, сделайте начальное и/или конечное положение больше ширины устройства. |
| Scale | Изменяет размер виджета. Часто используется для привлечения внимания к элементам интерфейса, например для увеличения кнопок при наведении или анимации диалоговых окон, появляющихся из центральной точки. |  | Scale: начальный или конечный коэффициент масштабирования виджета по горизонтали (X) или вертикали (Y), где 1 — текущий размер виджета. |
| Rotate | Поворачивает виджет по часовой стрелке или против. Часто используется для простых эффектов, таких как вращение иконки загрузки. |  | Turns: количество полных поворотов на 360 градусов. |
| Shake | Создаёт эффект тряски для виджета. Часто используется для привлечения внимания к элементу или указания на ошибку, например когда пользователь вводит неверные данные в поле формы. |  | Frequency: Количество трясок в секунду Offset: Расстояние тряски, большее значение усиливает эффект, а отрицательное — трясёт в противоположном направлении Rotation Angle: Угол тряски |
| Blur | Создаёт эффект фокусировки или расфокусировки для виджета |  | Radius (X or Y): Размер размытия. Для создания эффекта расфокусировки Final Radius должен быть больше Initial Radius. Для эффекта фокусировки Initial Radius должен быть больше Final Radius. |
| Saturate | Используется для повышения визуальной привлекательности путём усиления яркости цветов для фокусируемого содержимого или создания приглушённого эффекта для фоновых элементов. |  | Strength: 0 — полностью десатурировано, 100 — нормальная насыщенность, >100 — процент насыщенности |
| Tilt | Создаёт эффект трансформации (3D-перспектива) для виджета. Обычно используется для добавления тонкого интерактивного элемента к компонентам интерфейса, таким как кнопки или карточки, указывая на взаимодействие пользователя или фокус. |  | Tilt: Угол, под которым виден виджет. |
| Flip | Анимация переворота поворачивает элемент вокруг горизонтальной или вертикальной оси, создавая эффект зеркала. Часто используется для переворота карточек в интерфейсе, чтобы показать скрытую информацию. |  | Flip: Угол, под которым виден виджет. |
| Shimmer | Создаёт "блестящий" эффект, перемещающийся по экрану, часто используется для обозначения того, что данные или содержимое загружаются или запрашиваются. Примечание: эта анимация не работает в режиме тестирования. |  | Color: Цвет "блестящей" линии или градиента, проходящего по виджету. Обычно используется немного более светлый оттенок, чем у содержимого. Angle: Определяет направление эффекта мерцания по содержимому. 0 градусов — горизонтально, 90 — вертикально. |
| Tint | Добавляет эффект цветовой наложки к содержимому. |  | Color: Цвет наложения. Strength: Интенсивность тонирования. |
Кривая анимации
При применении анимации вы также сможете указать кривую. Кривая анимации — это по сути математическая формула, используемая для интерполяции значений во времени. Изменение кривой анимации позволяет контролировать скорость и стиль анимации.
FlutterFlow поддерживает разнообразные кривые анимации:
| Curve | Description |
|---|---|
| Ease In | Начинает анимацию медленно, а затем ускоряется к концу. Полезно для создания эффекта, где движение начинается плавно и ускоряется. |
| Ease In Out | Начинает анимацию медленно, ускоряется в середине, а затем замедляется к концу. Идеально для создания плавных, естественных анимаций без резких стартов или остановок. |
| Ease Out | Начинает анимацию быстро, а затем замедляется к концу. Создаёт эффект быстрого старта, который плавно останавливается. |
| Bounce | Добавляет эффект отскока в конце анимации. Анимированный объект перелетает конечную позицию и отскакивает назад, имитируя физическое поведение прыгающего мяча. |
| Elastic | Создаёт эластичный эффект, где анимация перелетает целевое значение и колеблется перед остановкой. Полезно для анимаций с пружинистым, эластичным ощущением. |
| Linear | Продвигается с постоянной скоростью на протяжении всей анимации. Обеспечивает равномерный переход от начала к концу без ускорения или замедления. |
Анимация при загрузке страницы
В многих случаях вы можете захотеть запустить анимацию при загрузке страницы или (в случае отложенной загрузки) виджета на экран.
Рассмотрим сценарий электронной коммерции, где запрос к серверу используется для получения списка популярных товаров. Может быть задержка между первой загрузкой страницы и отображением результатов. Чтобы улучшить пользовательский опыт, мы можем добавить анимации, чтобы пользователи знали, когда содержимое загружается.
Чтобы создать такой опыт, добавьте анимацию мерцания к виджету и отображайте этот виджет условно (т. е. когда запрос загружается). Вот как это сделать:
Анимация при срабатывании действия
Помимо запуска анимаций виджетов при загрузке, вы можете запустить анимацию как часть действия. Например, вы хотите, чтобы кнопка "лайк" анимировалась при клике пользователя.
Вот как это сделать:
Вы можете дать имя виджету, который хотите анимировать с помощью действия, это упростит его поиск в меню действий.
Применение нескольких анимаций
Вы можете применять несколько анимаций к одному виджету. По умолчанию при добавлении нескольких анимаций они выполняются последовательно (одна за другой), создавая ступенчатую анимацию. Однако вы можете указать одновременное выполнение всех анимаций.
Выполнение нескольких анимаций одновременно
Если вы хотите запустить несколько анимаций одновременно на одно и то же время (например, слайд и масштабирование виджета одновременно), включите опцию Apply same duration & delay при добавлении анимации.
Создание ступенчатой анимации
Ступенчатая анимация — это несколько анимаций, выполняемых последовательно. Добавление ступенчатых анимаций может помочь создать потрясающий визуальный эффект.
Чтобы создать ступенчатую анимацию, убедитесь, что опция Apply same duration & delay отключена, и продолжайте добавлять анимации. Свойство задержки будет автоматически скорректировано на основе длительности всех ранее добавленных анимаций.
Для ручного управления ступенчатой анимацией установите задержку для новой анимации на основе общей длительности всех ранее добавленных анимаций. Например, если первые две анимации длятся по 1000 мс (1 секунда), задержка для третьей анимации должна быть 2000 мс (2 секунды). Это гарантирует, что третья анимация начнётся только после завершения первых двух, каждая из которых длится 1 секунду.
Вот пример создания ступенчатой анимации:
Установка значений анимации из переменных
Вы можете динамически устанавливать значения анимации с помощью переменных вашего приложения. Эта гибкость позволяет создавать более сложные анимации. Давайте рассмотрим пример создания красивой анимации, где список элементов слайдится слева направо. Вот как это выглядит:
Если присмотреться, элементы появляются ступенчато. Это достигается путём установки значения задержки для каждого элемента на основе его позиции (индекса) в списке. Вот как это сделать:
Выберите элемент в списке и добавьте анимацию Slide.
В свойстве Delay откройте меню переменных и добавьте inline function, чтобы вычислить значение задержки на основе индекса элемента. В этом примере мы используем формулу [index] * 100, где index — позиция элемента, а 100 — задержка в миллисекундах. Это означает, что первый элемент слайдится через 100 мс, второй — через 200 мс и так далее, создавая эффект ступенчатой анимации.