Easing функции

Easing-функции — это математические зависимости, определяющие, как изменяется значение параметра во времени при анимации. В контексте работы с Paper.js они управляют скоростью интерполяции свойств объектов: позиции, масштаба, вращения, прозрачности и других характеристик.

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

Линейная интерполяция как базовый случай

Линейная функция задаётся выражением:

f(t) = t

где t — нормализованное время в диапазоне [0, 1].

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

  • постоянная скорость
  • отсутствие ускорения
  • визуально «механическое» движение

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

Основные категории easing-функций

Easing-функции обычно делятся на три базовые категории:

1. Ease In

  • медленный старт, затем ускорение
  • имитирует разгон

2. Ease Out

  • быстрый старт, затем замедление
  • имитирует торможение

3. Ease In-Out

  • сочетает разгон и торможение
  • наиболее естественный вариант

Квадратичные easing-функции

Квадратичные функции — одни из самых простых нелинейных вариантов.

Ease In:

f(t) = t²

Ease Out:

f(t) = t * (2 - t)

Ease In-Out:

f(t) = 2t², если t < 0.5
f(t) = -1 + (4 - 2t) * t, если t ≥ 0.5

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

  • плавное ускорение
  • простая реализация
  • хорошо подходят для базовых анимаций

Кубические и более высокие степени

Увеличение степени усиливает эффект ускорения и замедления.

Кубическая функция:

f(t) = t³

Преимущества:

  • более выраженная динамика
  • подходит для акцентированных переходов

Аналогично существуют:

  • Quartic (t⁴)
  • Quintic (t⁵)

С ростом степени:

  • ускорение становится более резким
  • движение кажется «тяжелее»

Синусоидальные easing-функции

Используют тригонометрические функции для создания плавных кривых.

Ease In:

f(t) = 1 - cos(t * π / 2)

Ease Out:

f(t) = sin(t * π / 2)

Ease In-Out:

f(t) = -(cos(π * t) - 1) / 2

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

  • очень мягкие переходы
  • отсутствие резких изменений скорости
  • хорошо подходят для интерфейсных анимаций

Экспоненциальные функции

Экспоненциальные easing-функции создают эффект резкого старта или остановки.

Ease In:

f(t) = 2^(10 * (t - 1))

Ease Out:

f(t) = 1 - 2^(-10 * t)

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

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

Elastic (упругие) easing-функции

Имитируют поведение пружины с колебаниями.

Пример:

f(t) = sin(13π/2 * t) * 2^(10 * (t - 1))

Свойства:

  • выход за пределы целевого значения
  • затухающие колебания
  • визуальная «игривость»

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

  • интерактивных элементов
  • декоративных эффектов

Bounce (отскок)

Моделируют эффект падения и отскока.

Пример реализации (упрощённо):

f(t) = 1 - bounce(1 - t)

Где bounce — кусочная функция.

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

  • имитация гравитации
  • серия затухающих прыжков
  • часто используется для UI-элементов

Реализация easing в Paper.js

Paper.js не содержит встроенной системы easing, поэтому функции реализуются вручную.

Пример базовой анимации с easing:

var start = new Point(50, 50);
var end = new Point(300, 300);
var duration = 1000;
var startTime = null;

function easeInOutQuad(t) {
    return t < 0.5
        ? 2 * t * t
        : -1 + (4 - 2 * t) * t;
}

view.onFr ame = function(event) {
    if (!startTime) startTime = event.time * 1000;

    var currentTime = event.time * 1000 - startTime;
    var t = Math.min(currentTime / duration, 1);

    var eased = easeInOutQuad(t);
    var position = start.add(end.subtract(start).multiply(eased));

    circle.position = position;

    if (t === 1) view.onFr ame = null;
};

Ключевые элементы:

  • нормализация времени
  • применение easing-функции
  • интерполяция значений

Интерполяция значений

Основная формула интерполяции:

value = start + (end - start) * f(t)

Где:

  • start — начальное значение
  • end — конечное значение
  • f(t) — easing-функция

В Paper.js это часто применяется к:

  • Point
  • Size
  • числовым значениям

Композиция easing-функций

Возможно комбинирование функций для создания сложных эффектов.

Пример:

function customEase(t) {
    return Math.sin(t * Math.PI) * t;
}

Результат:

  • ускорение в начале
  • пик в середине
  • замедление к концу

Практические рекомендации

Выбор функции:

  • интерфейсы — синусоидальные или ease-in-out
  • физические эффекты — bounce, elastic
  • быстрые переходы — экспоненциальные

Контроль времени:

  • всегда нормализовать t в диапазон [0, 1]
  • учитывать длительность анимации

Производительность:

  • избегать сложных вычислений в onFrame
  • при необходимости кэшировать значения

Читаемость:

  • выносить easing-функции в отдельные модули
  • использовать понятные имена (easeInQuad, easeOutCubic)

Расширяемость

Easing-функции легко масштабируются:

  • добавление параметров (амплитуда, частота)
  • создание генераторов функций
  • использование библиотек (например, портирование easing из CSS или других JS-библиотек)

Пример генератора:

function createPowerEase(power) {
    return function(t) {
        return Math.pow(t, power);
    };
}

Использование:

var ease = createPowerEase(4);

Сравнение визуального поведения

Различия easing-функций особенно заметны при одинаковой анимации:

  • линейная — равномерная
  • quadratic — мягкая
  • cubic — более выразительная
  • elastic — динамичная
  • bounce — «живая»

Грамотный выбор функции напрямую влияет на восприятие интерфейса и ощущение качества анимации.

Оглавление