Анимация

Что такое анимация?
Анимация - это настройка движения для каких-либо объектов веб-страницы. Например, текста.

Анимация используется как инструмент для придания выразительности, расставления акцентов и управления вниманием пользователя.
Анимация
Анимированные объекты
Анимированные изображения
Анимированный текст
Правила использования анимации:

1) Анимация в меру. Не анимируйте все элементы в вашем проекте.

2) Используйте анимацию для функциональных элементов (кнопки, пункты меню, карточки и т.д.)

3) Обращайте внимание на качество отображения анимации. Например, она не должна тормозить или дергаться.
ТЫК!
Наведи на меня
АНИМАЦИЯ В ТИЛЬДЕ
BASIC ANIMATION (простая анимация)
STEP BY STEP (шаг за шагом)
Готовые эффекты для объектов:

  • эффект появления (сверху, снизу, сбоку, через прозрачность)
  • параллакс
  • фиксация


Пошаговая анимация позволяет изменять свойства объекта (движение - положение объекта на плоскости, размер, прозрачность и т.д.) в зависимости от заданных настроек.

Для каждого отдельного изменения свои настройки - свой шаг.
Базовая анимация
Чтобы увидеть настройки базовой анимации, нужно выделить объект и промотать в панели свойств объекта (справа) до раздела "BASIC ANIMATION"
Для базовой анимации доступны настройки:

1) ANIMATION:

None - отсутствие анимационного эффекта
Fade In - просто появление
Fade in Up - появление сверху
Fade in Down -появление снизу
Fade In Left - появление слева
Fade In Right - появление справа
Zoom In - появление с увеличением
2) PARALLAX:

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

None - отсутствие параллакс-эффекта
Scroll - при скролле
Mouse - при движении курсором мыши
3) FIXING:

Настройки эффекта фиксации. Это та область экрана, относительно которой стартует эффект фиксирования.

On Window Top - верх экрана
On Window Center - центр
On Window Bottom - низ экрана
Все анимации появления имеют общие опции: Duration, Delay и Trigger Offset.

Duration — это время анимации в секундах (как долго будет появляться элемент);

Delay — задержка перед началом анимации в секундах;

Trigger Offset — это отступ в пикселях от нижнего края контейнера (нашей рабочей области), при котором начнет воспроизводиться анимация.

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

У анимации "Zoom In" есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.
#1 ANIMATION:
Параллакс может быть при скролле и по движению мыши.

По скроллу: Speed - настройка скорости параллакса.

Если скорость указана меньше 100%, то объект движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

По движению мыши: настройки дистанции по осям X и Y - для установки максимального отклонения элемента при параллаксе.
#2 PARALLAX:
В настройках фиксации можно выбрать область экрана, относительно которой заработает эффект фиксирования: верх, центр, низ.

Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.

Distance — это расстояние в пикселях, которое должен пройти "зафиксированный" объект.
#3 FIXING:
При помощи "TEST" можно посмотреть, как работает ваша анимация - у одного элемента или у всех сразу (в блоке).
КОРАБЛИ
ЛАВИРОВАЛИ
ЛАВИРОВАЛИ...
PARALLAX
scroll
mouse
1) Сделайте несколько круговых движений мышью, наведя курсор на текст

2) Поскролльте вверх-вниз, обращая внимание на Кешу
Пошаговая анимация
Чтобы увидеть настройки пошаговой анимации, нужно выделить объект и промотать в панели свойств объекта (справа) до раздела "STEP BY STEP ANIMATION"
Чтобы добавить выбранному объекту пошаговую анимацию, нажмите кнопку "ADD".

Обратите внимание, что при настройке пошаговой анимации отменится базовая!
Настройка степ-бай-степ анимации начинается с "EVENT" - это условие (событие), при котором будет начинать работать заданная позже анимация.
  • Element on Screen — анимация при появлении элемента на экране;
  • Block on Screen — анимация при появлении на экране текущего блока;
  • On Scroll — анимация запускается и продолжается во время скролла;
  • On Hover — анимация появляется при наведении на объект;
  • On Click — анимация начинается при клике на объект (или триггер).
После того, как выбрано условие, можно дополнительно настроить:

Start Trigger — триггер нашей анимации в виде верхней (On Window Top), центра (On Window Center) или нижней границы (On Window Bottom) экрана.

Например, у нас выбрано "element on screen" и "on Window Bottom". Это значит, что, как только анимируемый элемент появится в нижней части экрана, анимация начнется.

Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;

Loop — зацикливание анимации.

Далее нужно задать "шаги" для анимации, нажимаем "+Add step".

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

Это нулевой шаг, на нем ничего анимационного не происходит.

При помощи add step мы добавляем шаги, начиная со Step 1, для которых настраиваем анимацию, меняя в специальных полях свойства нашего элемента.
Чтобы объект в самом начале был невидим (Opacity = 0), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
Duration — длина анимации в секундах;

Move — координаты передвижения элемента относительно начального расположения.
Scale — процент увеличения или уменьшения в размерах элемента к концу этого шага;

Opacity — значение прозрачности элемента к концу шага;

Rotate — поворот элемента в градусах к концу шага;

Easing позволяет выполнять анимацию с определенным эффектом:

Linear — это линейное выполнение анимации,
EaseIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации.

Delay — задержка перед выполнением анимации.
ПримерЫ блокОВ со step by step АНИМАЦИЕЙ
Карточка первая
Карточка вторая
Карточка третья
Карточка четвертая
ДОМАШНЕЕ ЗАДАНИЕ:
1) Самостоятельно анимировать блок (индивидуально);
2) Настроить базовую анимацию для элементов своего проекта.