• Типы анимации
• Эффекты анимации
• Шаги анимации
• Триггеры анимации
• Множественные анимации
• Анимирование нескольких виджетов
• Как отключить анимацию

Типы анимации

Создать анимацию можно для любого виджета, кроме Hotspot, и Google maps. 

Чтобы анимировать виджет, нажмите на иконку Animation в его настройках. Всего существует четыре типа анимации: 

• On Load («При загрузке») — начинается после того, как страница полностью загружена; 
• On Click («По клику») — запускается по клику на виджет или его триггер; 
• On Hover («По наведению») — запускается по наведению курсора на виджет или его триггер;
• On Scroll («По скроллу») — стартует в тот момент, когда пользователь достигает определенного положения на странице и продолжается при дальнейшем скроллинге. 
  
  

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

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

Эффекты анимации

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

• Move («Перемещение»). Перенесите виджет туда, где он должен оказаться после завершения анимации. Сделать это можно, перетащив виджет мышкой или стрелочками на клавиатуре или же указав нужное вам значение высоты в пикселях. 
• Opacity («Насыщенность»). Укажите нужные значения для насыщенности: процент насыщенности виджета перед началом анимации и после ее завершения. 
• Rotate («Вращение»). Укажите градус, на который виджет должен повернуться после окончания анимации. 
• Scale («Масштабирование»). Укажите, на сколько процентов виджет должен увеличиться или уменьшиться после завершения анимации. 
  

Вы также можете выбрать один из готовых пресетов, чтобы заставить виджет пульсировать (pulse), исчезать (fade in), увеличиваться (scale up) и т.д. Настройки в пресетах можно менять в зависимости от того, какой именно эффект вам необходим.

Параметры анимации

Большинство параметров работают одинаково для разных типов анимации и эффектов. Среди них длительность (duration), задержка (delay), ускорение (acceleration) и зацикленность (loop). Зацикленность позволяет настроить анимацию так, чтобы она повторялась в режиме цикла (cycle) или от начального состояния к конечному, и наоборот (reverse). 

Если в анимации есть несколько шагов, вы можете зациклить отдельный шаг. Для всех шагов, следующих за ним, зацикленность включится автоматически.

Опция Once per user позволяет показывать анимацию каждому новому посетителю только один раз. При перезагрузке страницы тем же пользователем анимация не запустится. 

Некоторые параметры можно использовать только для определенных типов анимации:

• Start when in view, для анимации On Load. По умолчанию, анимация On Load запускается, как только страница загружена, даже если некоторые виджеты еще не видны на экране. Параметр Start When in View позволяет включить анимацию для виджета в тот момент, когда пользователь видит этот виджет на своем экране. 

• Start point, для анимации On Scroll. Выберите значение для этого параметра, чтобы запустить анимацию в тот момент, когда скролл достигнет верхней границы виджета (Top), его центра (Center) или нижней границы (Bottom). Отступы (Offset) позволяют установить точное значение для Start Point в пикселях.
  

• Speed, для анимации On Scroll. Изменяя этот параметр, вы можете указать, как долго должен проигрываться каждый шаг анимации, пока пользователь скроллит страницу. Чем выше скорость анимации, тем меньше времени она остается на экране в процессе скролла. 

Шаги анимации

Вы можете комбинировать несколько эффектов при помощи шагов анимации. Чтобы добавить новый шаг, нажмите на иконку + под виджетом.

К примеру, вы хотите, чтобы после клика виджет изменил свою насыщенность, а затем увеличился на 50%. Выберите анимацию On Click с эффектом Opacity. После этого нажмите +, чтобы добавить новый шаг, выберите эффект Scale и установите для него значение 100 → 150.

Триггеры анимации

Анимацию может инициировать не только сам анимированный виджет, но и любой другой виджет в проекте — такой виджет называется триггером. Чтобы назначить триггер, выберите тип анимации, нажмите Add trigger («Добавить триггер») и кликните по нужному виджету. В каждой анимации может быть не больше трех триггеров.  

Множественные анимации

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

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

Анимирование нескольких виджетов

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

Если вы группируете анимированные виджеты с виджетами без анимации, вы увидите сообщение о необходимости объединения анимации (Merge Animations), чтобы у всех виджетов были одинаковые атрибуты.

Как отключить анимацию

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