Функции плавности

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

Математическая модель движения

Любая анимация описывается изменением значения параметра ( x ) во времени ( t ). Без функции плавности зависимость линейна:

x(t) = t

При использовании easing вводится функция:

x(t) = f(t)

где ( f(t) ) — кривая ускорения. Она преобразует равномерный прогресс в нелинейный.

Роль easing в интерфейсной анимации

Функции плавности влияют на восприятие скорости и веса объектов:

  • резкое начало создаёт ощущение импульса
  • плавное замедление воспринимается как физическое трение
  • симметричные кривые создают равномерное движение с инерцией

В Motion One easing является стандартным параметром всех анимационных вызовов и интегрирован в систему animate.

Базовые типы функций плавности

Линейная функция

Самый простой вариант:

linear(t) = t

Движение происходит с постоянной скоростью без ускорения и замедления.

Используется в случаях:

  • прогресс-бары
  • технические индикаторы
  • синхронизация с внешними процессами

Ease-in (ускорение)

easeIn(t)

Движение начинается медленно и ускоряется к концу. Математически это часто степенная функция:

t^2, t^3, t^4

Характеристики:

  • мягкий старт
  • визуальная «тяжесть» объекта в начале
  • резкое завершение

Ease-out (замедление)

easeOut(t)

Противоположность ease-in:

  • быстрое начало
  • плавное торможение в конце

Используется для:

  • появления элементов интерфейса
  • модальных окон
  • карточек и списков

Ease-in-out

Комбинация двух режимов:

easeInOut(t)
  • медленный старт
  • ускорение в середине
  • замедление в конце

Эта кривая наиболее универсальна и часто используется по умолчанию.

Cubic Bézier-кривые

Большинство easing-функций в Motion One основаны на кубических кривых Безье:

f(t) = cubic-bezier(p0, p1, p2, p3)

Где:

  • ( p0 = 0 ), ( p3 = 1 )
  • ( p1 ), ( p2 ) управляют формой кривой

Пример:

import { animate } from "motion";

animate(
  ".box",
  { x: 300 },
  { ease: "cubic-bezier(0.42, 0, 0.58, 1)" }
);

Особенности:

  • высокая гибкость
  • возможность точной настройки «характера» движения
  • стандарт CSS-анимаций

Встроенные easing-режимы Motion One

В Motion One поддерживаются предустановленные значения:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

Пример использования:

animate(
  ".box",
  { opacity: 1, y: 0 },
  { duration: 0.6, ease: "ease-out" }
);

Каждое значение соответствует заранее определённой кривой.

Физические функции плавности (spring)

Отдельный класс функций основан на физике пружины. Вместо математической кривой используется модель:

F = -kx - cv

где:

  • ( k ) — жёсткость пружины
  • ( c ) — демпфирование
  • ( v ) — скорость

В Motion One это реализовано через type: "spring".

animate(
  ".box",
  { x: 400 },
  {
    type: "spring",
    stiffness: 120,
    damping: 20
  }
);

Характер движения:

  • реалистичная инерция
  • возможные «перелёты» (overshoot)
  • затухающие колебания

Spring-анимации применяются в интерфейсах, ориентированных на естественное поведение объектов.

Сравнение easing и spring

Тип Характер движения Использование
linear равномерное прогресс-индикаторы
ease сбалансированное универсальные UI
cubic-bezier настраиваемое кастомные эффекты
spring физическое интерактивные элементы

Кастомные функции плавности

Motion One позволяет передавать собственные функции:

animate(
  ".box",
  { scale: 1.2 },
  {
    ease: (t) => Math.pow(t, 3)
  }
);

Здесь t — нормализованное время от 0 до 1.

Особенности кастомных функций:

  • полный контроль над кривой
  • возможность реализации нестандартной физики
  • использование синусоидальных и экспоненциальных моделей

Пример синусоидальной плавности:

ease: (t) => Math.sin((t * Math.PI) / 2)

Комбинирование easing с keyframes

Функции плавности применяются не только к простым переходам, но и к сложным анимациям:

animate(
  ".box",
  {
    x: [0, 200, 100],
    opacity: [0, 1, 0.5]
  },
  {
    duration: 1,
    ease: "ease-in-out"
  }
);

В этом случае easing управляет распределением времени между ключевыми кадрами.

Влияние длительности на восприятие easing

Функция плавности всегда работает в связке с временем:

  • короткая длительность усиливает резкость кривой
  • длинная длительность подчёркивает плавность переходов

Пример:

animate(".box", { x: 300 }, { duration: 0.2, ease: "ease-out" });
animate(".box", { x: 300 }, { duration: 1.2, ease: "ease-out" });

Одинаковая кривая воспринимается по-разному из-за масштаба времени.

Практика выбора функции плавности

Типовые соответствия:

  • появление элементов — ease-out
  • исчезновение — ease-in
  • переходы между состояниями — ease-in-out
  • интерактивные drag-эффекты — spring
  • технические индикаторы — linear

Механизм применения easing внутри Motion One

При выполнении animate происходит нормализация времени:

  1. вычисляется прогресс ( p = t / duration )
  2. применяется easing: ( p’ = f(p) )
  3. интерполируются значения свойств

Этот процесс повторяется на каждом кадре через requestAnimationFrame, обеспечивая синхронное обновление UI.

Оглавление