Создание кастомных easing-функций

GSAP (GreenSock Animation Platform) предоставляет мощный механизм для управления анимацией через easing-функции, определяющие, как значения свойства изменяются во времени. Встроенные easing-функции, такие как Power1, Power2, Elastic или Bounce, покрывают большинство стандартных случаев, однако для создания уникальных анимационных эффектов часто требуется кастомное поведение, которое реализуется через собственные easing-функции.

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

const customEase = t => t * t; // Простейший пример: квадратичное ускорение
gsap.to(".box", { duration: 2, x: 300, ease: customEase });

Структура кастомного easing

  1. Линейная основа Основной принцип любой easing-функции — преобразование линейного времени в нелинейное смещение:

    function linearEase(t) {
    return t; // Простое линейное движение
}

  2. Ускорение и замедление Для создания эффекта ускорения используют функции с экспоненциальным ростом или квадратичными/кубическими формулами:

    function easeInQuad(t) {
    return t * t;
}

function easeOutQuad(t) {
    return t * (2 - t);
}

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

  3. Сложные кривые с overshoot и bounce Для имитации «отскока» или выхода за пределы целевой позиции используют функции с тригонометрическими или полиномиальными компонентами:

    function bounceOut(t) {
    if (t < 1/2.75) {
        return 7.5625*t*t;
    } else if (t < 2/2.75) {
        return 7.5625*(t-=1.5/2.75)*t + 0.75;
    } else if (t < 2.5/2.75) {
        return 7.5625*(t-=2.25/2.75)*t + 0.9375;
    } else {
        return 7.5625*(t-=2.625/2.75)*t + 0.984375;
    }
}

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

GSAP предоставляет встроенный инструмент CustomEase, который позволяет создавать кривые с точным управлением через графический редактор или код:

gsap.registerPlugin(CustomEase);

// Создание кривой через строку cubic-bezier
const myEase = CustomEase.create("custom", "M0,0 C0.25,0.1 0.25,1 1,1");

gsap.to(".circle", {
    duration: 2,
    x: 400,
    ease: myEase
});

CustomEase.create принимает два аргумента:

  • уникальный имя easing;
  • строку кривой в формате SVG Path или CSS cubic-bezier.

Программное создание сложных кривых

Для динамических эффектов удобно генерировать easing-функции через математические формулы или массивы ключевых точек:

function generateEase(points) {
    return t => {
        let i = 0;
        while (i < points.length - 1 && t > points[i + 1].x) i++;
        const p0 = points[i];
        const p1 = points[i + 1];
        const ratio = (t - p0.x) / (p1.x - p0.x);
        return p0.y + ratio * (p1.y - p0.y);
    };
}

const points = [
    { x: 0, y: 0 },
    { x: 0.3, y: 0.6 },
    { x: 0.7, y: 0.4 },
    { x: 1, y: 1 }
];

const dynamicEase = generateEase(points);

gsap.to(".square", { duration: 2, x: 500, ease: dynamicEase });

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

Сочетание нескольких easing-функций

GSAP поддерживает композицию easing через Ease объекты, что позволяет комбинировать разные эффекты:

const firstHalf = t => t * t;      // easeInQuad
const secondHalf = t => t*(2-t);   // easeOutQuad

const combinedEase = t => t < 0.5 ? firstHalf(t*2)/2 : 0.5 + secondHalf((t-0.5)*2)/2;

gsap.to(".triangle", { duration: 3, x: 400, ease: combinedEase });

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

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

  • Всегда проверять диапазон выходных значений: функция должна возвращать значения от 0 до 1.
  • Для сложных кривых использовать CustomEase с графическим редактором, это облегчает визуальное моделирование движения.
  • Для динамически создаваемых анимаций применять программные генераторы кривых на основе массивов точек или математических выражений.
  • Тестировать анимацию в разных браузерах, чтобы убедиться, что интерполяция выполняется корректно.

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

Оглавление