Иногда кажется, что простые вещи давно известны всем, но буквально вчера проводил маленький ликбез по теме.

Сегодня пост — база по UI-анимации, тем более Фигма Моушен показали, ща начнется…

Что такое анимация? Авторская формулировка — изменение свойств объекта во времени.

В любом инструменте, будь это покойный Flash, или After Effects и Rive, будет шкала времени, ключевые кадры, и настройки интерполяции.

Шкала времени (Timeline) Это горизонтальная ось, длительность которой задается в настройках проекта. Сверху есть отметки времени — секунды, минуты. Если масштаб приблизить, секунды будут разделены на f или fr. Это фреймы, они же кадры.

Количество фреймов в секунде зависит от FPS, установленого в проекте. В кино стандарт 24. Чем больше FPS, тем плавнее. Чем меньше, тем анимация будет более дерганой.

Банально, потому что при достройке промежуточных состояний кадров внутри будет больше.

Кроме времени в таймлайне есть параметры объектов и их значения. Объекты могут менять положение, размер, наклон, цвет и тп. Значения параметров записаны в ключевых кадрах на таймлайне.

Ключевые кадры (Keyframes) Ключи живут на шкале и обычно обозначаются ромбиком. Иногда символ может меняться, в зависимости от свойств интерполяции.

У объекта может быть множество параметров в ключе. Если за 1 секунду объект изменил только размер, то будет лишь 1 отметка на точке времени. Если к размеру добавилось ещё и положение, то будет уже 2 отметки. Все зависит от того, сколько параметров вы меняете.

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

Дальше просто двигаем ползунок по шкале времени и меняем параметры объекта. Вот на 0 сек. объект расположен по Х=0, потом мы перешли на 1 сек. и подвинули его вправо Х=100. На таймлайне появился ещё один ключ.

Теперь программа сама посчитает движение покадрово. Если мы включим анимацию, объект будет равномерно ехать вправо. Слава интерполяции!

Интерполяция кадров (Keyframe interpolation) Мы задали координаты объекта по Х на нулевой и первой секунде и видим движение. Если бы не было интерполяции это бы выглядело как телепортация из Х= 0 в Х=100.

Интерполяция просчитывает промежуточные значения между точками, как объект покадрово перемещается между ключами. Именно поэтому это и выглядит как движение.

Программа сделает промежуточные кадры, но скучно и равномерно. Мы  можем сделать вкуснее, если настроим изинги.

Изинги указывают программе как распределяется скорость изменений от ключа до ключа. Распределение скорости помогает задать объектам характер. Наделить энергией или спокойствием, выделить важный объект в сцене. Нет ничего скучнее равной скорости.

Обычно есть готовые пресеты изингов:

Linear — равномерное движение от начала к концу. Редко используется, потому что выглядит скучно.

Ease-In — начинается медленно и разгоняется к концу.

Ease-Out — начинается быстро и замедляется к концу.

Ease-In-Out — плавный разгон, в середине быстро, в конце плавное торможение.

Распределение скорости описывается с помощью кривой Безье, где одна ось — время, а другая — прогресс.

Все эти стандартные пресеты это кривая в том или ином виде. Линейная — тупо диагональ, ease-in плавное начало подъема, и тп. Если вам нужно нечто особенное, рулить кривой придется самостоятельно.

Как читать кривую изинга Есть два узла: снизу слева, и вверху справа. Это вход и выход из ключа в ключ. У узлов есть ручки, которые можно тянуть.

Чем дальше тянем ручку от узла, тем дольше будет длиться этот участок.

Крутой уклон означает быстрое изменение, более пологий — медленное. Чем вертикальнее, тем более скачкообразно изменение, а если горизонтальнее, тем медленнее (или ничего не меняется).

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

Если эта тема вам интересна — лайкайте. Можем обсудить спринг или стежеринг в следующих постах.