LeCodesdocs

Функции сглаживания

Функции сглаживания для animate. Сглаживание — это просто функция:

TypeScript
type Easing = (t: number) => number   // линейный прогресс 0..1 → сглаженный прогресс

Всё такой формы работает как animate({ easing }) — встроенные ниже покрывают частые случаи, cubicBezier строит остальное, а свои можно написать руками.

Обзор

TypeScript
animate({ from: 0, to: 300, duration: 400, easing: easeOut,
          onUpdate: v => { card.x = v } })

const overshoot = cubicBezier(0.34, 1.56, 0.64, 1)     // back-out: проходит цель, затем оседает
animate({ from: 0.5, to: 1, duration: 250, easing: overshoot,
          onUpdate: v => { card.scale = v } })

Встроенные функции

TypeScript
easeIn(t): number       // квадратичное ускорение: t²  — медленный старт, быстрый финиш
easeOut(t): number      // квадратичное замедление: 1 − (1 − t)²  — быстрый старт, мягкое оседание
easeInOut(t): number    // easeIn для первой половины, зеркально для второй

Все три — обычные квадратичные кривые. easeOut — то, что нужно большинству UI-движений (отклик сразу, мягкое оседание).

cubicBezier

TypeScript
cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing

Строит сглаживание из двух контрольных точек — те же параметры, что у CSS cubic-bezier(x1, y1, x2, y2), поэтому любая кривая из галереи CSS-easing переносится напрямую. Возвращаемая функция переиспользуема; создавай её один раз, а не на каждый твин.

  • x1 / x2 должны оставаться в 0..1 (они параметризуют время).
  • y1 / y2 могут выходить за 0..1 — так получается overshoot (ощущения back/spring): сглаженный прогресс временно превышает 1, поэтому анимируемое значение проходит to и возвращается.
  • Концы точны: вход 0 возвращает 0, вход 1 возвращает 1.
  • cubicBezier(a, a, b, b) (контрольные точки на диагонали) возвращает обычное линейное сглаживание.

Смотрите также

  • animate — куда подключаются функции сглаживания.
← НазадanimateДальше →Scene2D