Анимация

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

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

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

Пресеты

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

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

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

Режим Animation mode

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

Кнопка Animation mode в переключателе позволяет войти в режим до выбора виджета. Пока элемент не выбран, правая панель предлагает выбрать элемент. Фреймы-брейкпоинты и виджет Embed анимировать нельзя.

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

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

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

Кнопка Show active animation step only оставляет на холсте выбранное состояние, а Show all animation steps возвращает весь маршрут. При показе маршрута можно выбрать состояние по его номеру и изменить его прямо на холсте.

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

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

• Layout — положение, размер и поворот; у состояний 1 и далее размер задаётся полями W и H.
• Style — заливка, прозрачность и скругление;
• Effects — Drop shadow и Layer blur.

Шаг 0 выбирает исходный виджет: изменение его положения и размера меняет основу, относительно которой расположены остальные состояния. Шаги 1 и далее редактируют отдельные состояния анимации. Их можно перемещать, масштабировать и поворачивать прямо на холсте, не изменяя исходный виджет.

Тени и размытие задаются отдельно для каждого состояния.

Переключатель 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 в строке Start можно выбрать точку старта (Top, Center, Bottom), отступ и его единицу — px или %. Проценты считаются от высоты видимой области прокрутки: в редакторе это область Preview, на сайте — окно браузера или прокручиваемый блок, в котором находится статья. Это не процент высоты виджета или всей статьи.

Положительный отступ сдвигает линию запуска вверх, отрицательный — вниз. Например, Bottom · 25% задаёт линию на четверть высоты выше нижнего края области просмотра; анимация начинается, когда нижний край виджета достигает этой линии. При высоте области 800 px отступ равен 200 px, при 600 px — 150 px.

При переключении px ↔ % редактор пересчитывает число по текущей высоте Preview, сохраняя положение линии запуска на этом размере. После изменения высоты области просмотра процентный отступ адаптируется. Ранее сохранённые анимации без указанной единицы продолжают использовать пиксели.

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

У Scroll переход между состояниями привязан к прогрессу прокрутки.

Ping pong

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

Переход

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

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

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

WARNING

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