Анимация

Секция Animation управляет появлением и движением виджета. К одному виджету можно добавить несколько анимаций.

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

Быстрый старт

1. Нажмите + в секции Animation.
2. Выберите триггер — событие, которое запускает анимацию.
3. Откройте настройки кнопкой с иконкой анимации.
4. Выберите Preset или настройте начальное и конечное состояния вручную.
5. Проверьте результат в предпросмотре.

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

Триггеры

• Hover — наведение на виджет.
• Click — клик по виджету.
• Scroll — прокрутка страницы.
• Visibility — появление виджета в области просмотра.
• Mouse Move — движение курсора.

Для Scroll и Visibility можно выбрать точку старта и отступ. У Mouse Move настраиваются начальная точка и скорость по осям. Поле Behavior определяет, вернётся ли виджет в исходное состояние после повторного действия, ухода курсора или обратной прокрутки.

У Scroll положение виджета должно зависеть от текущего прогресса прокрутки, а не просто запускаться один раз.

У Mouse Move полезно видеть раздельную реакцию по горизонтальной и вертикальной оси.

Состояния

В Effect задаются состояния Start и End: положение, поворот, масштаб, цвет, прозрачность, скругление, размытие и тень. Режим 3D добавляет третью ось и объёмные повороты.

Primary указывает обычное состояние виджета. Ping pong проигрывает движение туда и обратно.

На примере ниже Ping pong должен читаться как единый цикл туда и обратно, а не как два отдельных запуска.

Переход

В Transition настраиваются длительность или дистанция, задержка, характер ускорения, скорость и количество повторов. Для анимаций от прокрутки время заменяется расстоянием в пикселях.

Сравнение одинакового движения помогает понять влияние easing и длительности лучше, чем отдельные значения в панели.

Готовую анимацию можно скопировать и вставить в другую анимацию через Actions.

WARNING

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