Анимация

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

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

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

1. Нажмите + в секции Animation.
2. В появившейся строке выберите триггер — событие, которое запускает анимацию. Новая анимация по умолчанию использует Visibility.
3. Нажмите Open animation mode.
4. Выберите состояние на нижней шкале и измените его в правой панели.
5. Нажмите Play animation preview, чтобы проверить движение прямо на холсте.

Настройки больше не открываются во всплывающем окне. Кнопка Open animation mode переводит редактор в отдельный режим со шкалой состояний и правой панелью свойств.

Пресеты

В строке анимации кнопка Open presets открывает готовые варианты: например, Fade In, Slide Up, Zoom In, Rotate In и Blur In. Фильтр вверху выбирает, для какого триггера показать пресеты. Сам триггер анимации изменится только после применения карточки.

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

Тот же каталог доступен по кнопке Presets внутри Animation mode. После применения редактор возвращается к шкале и выбирает первое редактируемое состояние.

Режим Animation mode

Animation mode заменяет прежнее всплывающее окно настроек. Войти в него можно кнопкой справа от панели создания виджетов или кнопкой Open animation mode в строке нужной анимации. Если у виджета несколько анимаций, переключайтесь между ними в секции Animation внутри режима.

Кнопка на нижней панели позволяет войти в режим до выбора виджета. В этом случае редактор попросит выбрать элемент. Фреймы-брейкпоинты и виджет Embed анимировать нельзя.

Шкала состояний

На нижней панели шаг 0 показывает базовое состояние. Числа 1, 2 и далее — следующие состояния, а кнопки между ними открывают настройки переходов.

Add step добавляет новое состояние и переход к нему. Новый шаг наследует предыдущие значения, поэтому достаточно изменить только нужные свойства. Любой нумерованный шаг можно удалить кнопкой Remove step; базовый шаг 0 не удаляется.

Свойства состояния

При выборе состояния правая панель показывает его свойства:

• Layout — положение, масштаб и поворот;
• Style — заливка, прозрачность и скругление;
• Effects — Drop shadow и Layer blur.

Базовый шаг 0 редактируется так же, как остальные состояния. Изменения применяются только к выбранному шагу.

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

Переключатель 2D / 3D меняет набор геометрических контролов. В 3D появляются положение и масштаб по Z, а также повороты по X и Y.

Проигрывание на холсте

Play animation preview запускает активную анимацию без перехода в общий Preview. Во время движения кнопка меняется на паузу; после паузы можно продолжить просмотр. Переключатель Play once / Loop задаёт одно проигрывание или повтор, а Stop animation preview останавливает текущий запуск.

В секции Settings задаются Primary, настройки старта, Behavior и Ping pong. Primary определяет, какое крайнее состояние считается обычным состоянием виджета.

Секция Export содержит Copy и Paste. Она копирует всю активную анимацию и позволяет заменить настройки другой анимации в текущем редакторе.

Нажмите Exit animation mode, чтобы вернуться к обычному редактированию.

Триггеры

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

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

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

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

Ping pong

Ping pong в секции Settings проигрывает весь маршрут вперёд, а затем в обратном направлении.

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

Переход

Нажмите кнопку между двумя состояниями на шкале, чтобы выбрать их переход. В правой панели останется секция Transition: здесь настраиваются длительность или дистанция, задержка, Easing, скорость и Times. Для Scroll и Mouse Move время заменяется расстоянием в пикселях.

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

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

Несколько выбранных виджетов

Если выделено несколько виджетов, + добавляет анимацию каждому из них. Общие настройки строки и выбранный пресет применяются ко всему выделению, при этом начальное оформление каждого виджета сохраняется. Для входа в Animation mode оставьте выделенным один виджет.

WARNING

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