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

Easing (сглаживание) определяет ускорение перехода между начальным и конечным кадрами, также известными как ключевые кадры, с помощью математической функции. Ключевые кадры могут представлять два кадра в движении, например, переход с одного экрана на другой, или начальное и конечное состояния одного кадра, например, изменение цвета объекта.

В приведённых ниже примерах анимации easing представлено в виде кривой на графике, где по оси X показано время, а по оси Y — движение, такой как Move (Движение), Slide (Слайд) или Smart Animate (Умная анимация). Ключевые кадры обозначены начальной и конечной точками кривой на графике.

Linear (линейная)

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

Ease In (плавное начало)

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

Ease Out (замедление)

Ease out — это противоположность плавного начала (Ease In). В такой анимации движение начинается быстро и замедляется к концу своей длительности. Этот эффект хорошо подходит для появления объектов и усиления важной визуальной информации.

Ease In And Out (Плавное начало и конец)

Анимация начинается медленно, ускоряется в середине и замедляется к концу своей длительности. В большинстве случаев такое движение выглядит плавным и естественным, но может казаться неестественным или слишком «идеальным», если применять его повсеместно.

Ease In Back (Плавное начало с возвратом)

Анимация немного выходит за начальное значение ключевого кадра, а затем ускоряется к концу. Это создает эффект «отскока», который действует как подготовительное движение, усиливая основное действие и делая его более выразительным. Как и плавное начало (Ease In), этот эффект хорошо подходит для плавного скрытия объектов.

Ease Out Back (Замедление с возвратом)

Является противоположностью плавного начала с возвратом (Ease In Back). Анимация начинается быстро, затем замедляется и выходит за конечное значение ключевого кадра. Это создает эффект «отскока», который делает завершение движения более плавным и естественным. Как и замедление (Ease Out), этот эффект хорошо подходит для появления объектов.

Ease In And Out Back (Плавное начало и конец с возвратом)

Анимация начинается медленно, слегка выходя за начальное значение ключевого кадра, затем быстро ускоряется, замедляется и снова выходит за конечное значение. Это создает эффект подготовительного «отскока» в начале, затем резкое движение, завершающееся плавным возвратом перед финальным состоянием.

Пользовательское сглаживание (Custom Easing) с кривой Безье

Выберите вариант Custom, чтобы вручную настроить значения сглаживания. Figma отобразит график — редактор кривых Безье, основанный на ранее выбранном предустановленном варианте.

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

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

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

• Оси графика показывают кривую, где x — это время, а y — переход (например, Move In, Slide или Smart Animate).

• Два ключевых кадра обозначают начальное и конечное состояние анимации. Они зафиксированы в (0,0) и (1,1). Нажмите на ключевой кадр, чтобы сбросить ручки Безье.

• Непрерывная кривая отображает значения объекта на протяжении всей анимации — это и есть кривая сглаживания.

• Регулируемые ручки позволяют изменять форму кривой. Если у пользовательской кривой нет ручек, кликните и перетащите ключевой кадр, чтобы их активировать.

• Вы также можете вручную вводить числовые значения для точной настройки кривой.

Spring Animation Presets (Предустановки пружинной анимации )

Комбинируйте пружинные анимации с анимированными переходами в Figma для создания более естественных и динамичных движений.

Вы можете выбрать один из следующих предустановленных вариантов или создать свой собственный:

• Gentle (Мягкий) – самый нейтральный вариант среди пружинных кривых. Отлично подходит для ненавязчивой анимации с эффектом пружины, например при изменении масштаба контента.

• Quick (Быстрый) – немного более упругий эффект, идеально подходит для всплывающих уведомлений и сообщений.

• Bouncy (Прыгучий) – игривая предустановка для забавных анимаций, например подпрыгивания сердечка.

• Slow (Медленный) – плавный и естественный способ масштабирования полноэкранного контента.

• Custom (Пользовательский) – настройте свою собственную кривую пружинной анимации. ⬇️

Custom Spring Curves (Пользовательские пружинные кривые)

Настройте пружинную анимацию, изменяя значения жесткости (Stiffness), затухания (Damping) и массы (Mass) в модальном окне Interaction details или перетаскивая анимированный график.

• Жесткость (Stiffness): влияет на количество «отскоков» в анимации и может быть настроена путем перетаскивания графика.

• Затухание (Damping): влияет на уровень пружинного эффекта в анимации и может быть отрегулировано через график.

• Масса (Mass): влияет на скорость анимации и высоту отскока. Для изменения значения массы нужно вручную отредактировать поле Mass. Изменение массы также влияет на значение миллисекунд для настройки длительности.

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