Анимация по триггеру "По клику"

Триггер По клику (On click) позволяет настроить анимацию, которая будет запускаться при клике на элемент. Этим триггерным элементом может быть сам анимируемый элемент или любой другой элемент на странице — это можно задать в настройках анимации.

Основные действия при работе с анимациями:

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

По умолчанию в этой настройке выбран анимируемый элемент — объект, к которому применена анимация. Этот вариант можно использовать, например, если вам нужно увеличить размер картинки при клике по ней.

Когда может понадобиться изменить триггерный элемент

Посмотрим на примере. Задача — когда вы кликаете на кнопку, рядом должна появиться картинка. Для этого нужно добавить анимацию «По клику» для картинки, а кнопку выбрать в качестве триггерного элемента.

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

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

Зацикливание по кругу (Loop) - после окончания анимации ее воспроизведение начнется заново с первого кадра.

Зеркальное зацикливание (Loop with reverse) - после окончания анимации ее воспроизведение начнется в обратном направлении.

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

По умолчанию при добавлении анимации в настройках пресетов установлен параметр Проявление (Fade In).

Эффекты отвечают за то, какие действия будут происходить с элементом при анимации. Чтобы добавить эффект, нажмите на «+» справа.

Для настройки доступны 6 эффектов:

Кликнув на название эффекта, вы перейдете к его настройкам. Здесь вы можете просмотреть заданные по умолчанию опции и установить желаемые параметры. 

Для эффектов доступны следующие настройки:

Начало (Start) и Конец (End)

Настройка позволяет задать значение параметров эффекта в начале и в конце анимации.

Время (Timing)

Можно установить длительность анимации и задержку начала эффекта в секундах.

Интерполяция (Easing)

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

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

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

Чтобы удалить добавленный эффект, кликните на три точки рядом с его названием и нажмите Удалить. При этом эффект будет удален на всех разрешениях. 

Если вы не хотите воспроизводить эффект на выбранном разрешении, его можно скрыть кликом на значок глаза справа от названия.

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

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

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

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

Для этого нужно добавить анимацию «По клику» для блока с дополнительной информацией, а в качестве триггерного элемента выбрать блок с преимуществом. В настройках анимации нужно использовать эффект непрозрачности — от 0 до 100%. Тогда блок с дополнительной информацией будет изначально скрыт и станет видимым только при клике на блок с преимуществом.

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