Параметры easing-функций

GSAP (GreenSock Animation Platform) предоставляет мощный и гибкий механизм для управления временными характеристиками анимации с помощью easing-функций. Эти функции позволяют изменять скорость анимации в течение её выполнения, создавая более естественные и выразительные движения элементов.

Типы easing-функций

GSAP включает несколько категорий easing, каждая из которых отвечает за определённый тип движения:

  1. Power easings

    • Power0, Power1, Power2, Power3, Power4 Эти функции позволяют контролировать экспоненциальное ускорение или замедление. Чем выше цифра, тем более выражено изменение скорости:
    gsap.to(".box", { duration: 2, x: 300, ease: "power2.inOut" });
    • .in — ускорение в начале анимации
    • .out — замедление в конце
    • .inOut — комбинация ускорения в начале и замедления в конце

  2. Elastic (эластичные)

    • Имитация упругого движения с «отскоком»:
    gsap.to(".ball", { duration: 2, y: 200, ease: "elastic.out(1, 0.3)" });

    Параметры:

    • Первый аргумент: амплитуда (stretch)
    • Второй аргумент: частота колебаний (period)

  3. Bounce (отскок)

    • Симулирует падение объекта с отскоками:
    gsap.to(".ball", { duration: 2, y: 200, ease: "bounce.out" });

  4. Back (возврат)

    • Эффект «сначала слегка назад, затем вперёд»:
    gsap.to(".button", { duration: 1, scale: 1.5, ease: "back.out(1.7)" });

    Параметр задаёт величину «отката» перед основной анимацией.

Кастомизация easing-функций

GSAP позволяет создавать кастомные easing-функции через класс CustomEase или функцию gsap.parseEase. Это полезно, когда стандартных кривых недостаточно:

gsap.to(".box", {
  duration: 2,
  x: 300,
  ease: gsap.parseEase("M0,0 C0.126,0.382 0.22,1 1,1")
});
  • Строка в формате SVG path задаёт кривую ускорения.
  • M0,0 — начальная точка, C — кубическая Безье-кривая, 1,1 — конечная точка.

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

gsap.to(".box", {
  duration: 2,
  x: 300,
  ease: function(progress) {
    return Math.sin(progress * Math.PI / 2);
  }
});
  • Аргумент progress изменяется от 0 до 1
  • Возвращаемое значение определяет текущее состояние анимации

Взаимодействие easing с timelines

Easing можно применять не только к отдельным анимациям, но и ко всей последовательности gsap.timeline:

let tl = gsap.timeline({ defaults: { duration: 1, ease: "power1.inOut" } });
tl.to(".box1", { x: 200 })
  .to(".box2", { y: 100 })
  .to(".box3", { rotation: 360 });
  • defaults задаёт базовый easing для всех шагов анимации
  • Индивидуальные анимации могут переопределять easing локально

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

  • Использовать power easings для плавных, естественных переходов
  • Elastic и bounce — для игр, интерфейсов с «живым» откликом
  • Back — для анимаций элементов интерфейса при появлении
  • Для сложных кривых движения применять CustomEase или SVG-пути
  • В timeline избегать резкого смешения разных easings без тестирования, чтобы не нарушить визуальную гармонию

Влияние easing на восприятие анимации

Easing определяет ритм и характер движения, напрямую влияя на UX. Неправильный выбор функции может сделать интерфейс:

  • тяжёлым и медленным — при слишком сильном замедлении
  • нереалистичным — при слишком резких скачках
  • утомительным — при частых и повторяющихся bounce-эффектах

Правильное применение easing позволяет создавать интерфейсы с ощущением физической логики и плавности.

Оглавление