17 октября 2023

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

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

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

Пример анимации без эффекта сглаживания. На протяжении всего движения скорость элемента не меняется.

Пример анимации, где есть сглаживание в начале и в конце анимации. Сглаживания в начале и в конце симметричны.

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

Easing настраивается отдельно для каждого шага анимации.
Настройка Easing в Zero Block
Где найти редактор функции плавности: Step-by-step animation → Easing → Edit.
Читайте также

С помощью блока Т1093 «Popup: Zero Block в попапе» в категории «Другое».

Теперь вы можете более гибко редактировать дизайн страницы регистрации и авторизации для человека, которому вы предоставляете доступ в Личный кабинет (Members).
Made on
Tilda