Гибкое редактирование Easing в Step-by-step анимации

Теперь вы можете более гибко Easing для каждого шага анимации. Ранее были доступны пять базовых типов изингов: linear, ease-in, ease-out, ease-in-out, elastic-fin. К ним добавилась возможность изменять функцию плавности вручную, задавать точные координаты для этой функции, а также 24 новых типа изингов.

Easing – это изменение скорости движения элемента в рамках одной анимации — замедление или ускорение. Оно придаёт физические свойства нефизическим объектам: естественность, характер и динамику.

Самое неестественное движение для восприятия — линейное. Представьте себе, что на всем пути анимации скорость элемента не меняется. Как если бы не было силы гравитации и трения. Такая анимация выглядит искусственно и просто неаккуратно.

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

1. Выберите элемент и добавьте для него шаг анимации
2. Задайте значение Move (или любой другой параметр) и перейдите в Easing → Edit
3. Далее вы можете выбрать тип изинга из списка, изменить изинг с помощью кривых Безье или задать для него координаты. Ниже можно запустить проигрывание анимации для этого шага, нажав на иконку play.

Easing настраивается отдельно для каждого шага анимации.

Где найти редактор функции плавности: Step-by-step animation → Easing → Edit.