В этой статье мы расскажем о настройках запуска анимации По триггеру анимации.

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

В типе взаимодействия По триггеру анимации одна анимация начинается на определенном шаге другой. Триггером выступает один из шагов.

Мы рассмотрим пример, в котором заканчивается анимация кнопки и начинается анимация аватара.

Первым делом нужно настроить анимацию элемента № 2. В нашем случае, анимация кнопки содержит 6 шагов и срабатывает при клике.

Затем настраиваем анимацию элемента № 1, в нашем случае аватара. Выбираем кнопку нашим элементом для триггера.

Далее выбираем на каком шаге запускать анимацию аватара. В нашем примере выбран триггер для всей анимации.

Следующая настройка — Начать анимацию после.

Начать анимацию после Начала — анимация аватара запустится после первого шага анимации кнопки.

Начать анимацию после Завершения — анимация элемента запустится после последнего шага анимации кнопки.

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

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

Если выбрана опция Начала, триггер сработает только в самом начале первой итерации шага. Для выбранной опции Завершения триггер сработает в самом конце шага, после всех итераций.

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

В примере ниже показываем варианты настройки повторения.

У анимации есть два направления проигрывания: 

Туда — проигрывание анимации от начального положения до последнего шага.

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