Easing — это изменение скорости движения в анимации так, что элементы визуально становятся похожи на физические объекты. Движение становится более предсказуемо, поэтому не причиняет дискомфорта и вызывает нужные ассоциации.
Существует несколько типов плавности, рассказываем о них подробнее.
⚡️ Ease-In-Out
Этот тип плавности самый распространенный. Ease-In-Out заключается в плавном ускорении элемента в начале и замедлении в конце пути. Так анимация выглядит наиболее естественно — разгон, движение и остановка.
⚡️ Плавность в начале анимации (Ease-In)
В этом случае у элемента есть разгон в начале и постоянная скорость анимации. Выглядит такая анимация как старт ракеты.
⚡️ Плавность в конце анимации (Ease-Out)
При таком типе плавности у элемента есть ярко выраженное быстрое движение в начале и плавная остановка движения в конце анимации.
⚡️ Эластичность (Elastic Fin)
При столкновении предметы обычно отскакивают друг от друга. Такой тип добавляет плавный отскок в конце движения и напоминает падение мячика на упругую поверхность.
При проектировании анимации старайтесь думать о том, какой характер должно иметь движение элементов и какие ассоциации вызывать у пользователя. Это позволит сообщить нужное настроение и эффективно использовать возможности анимации.
Настроить плавность для элемента в Zero Block можно, выбрав подходящий тип в графе Easing на нужном шаге анимации.
📌 Совет: не используйте несколько типов плавности для элементов на странице, если только не спланировали конкретный сложный сценарий анимации. Разные эффекты для равнозначных элементов запутают человека и ухудшат пользовательский опыт взаимодействия со страницей.
