Cubic-bezier

cubic-bezier — это функция временной кривой, определяющая скорость анимации в течение всего её цикла. В anime.js она используется для задания кастомных easing-функций, позволяя точно управлять ускорением и замедлением анимации. Вместо стандартных предустановленных easing, таких как linear, easeInOutQuad или easeOutElastic, можно создать уникальную кривую.

Синтаксис cubic-bezier в anime.js:

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  easing: 'cubicBezier(.42, .0, .58, 1)'
});

Пояснение параметров

Функция cubic-bezier принимает четыре числовых параметра (x1, y1, x2, y2), где:

  • x1 и x2 — горизонтальные координаты контрольных точек кривой. Они должны быть в диапазоне [0, 1].
  • y1 и y2 — вертикальные координаты контрольных точек. Они могут выходить за пределы [0, 1] для создания “отскоков” или “перепрыгиваний”.

Прямое назначение этих точек: формирование кривой Безье, которая определяет темп анимации. Значения x отвечают за прогресс анимации во времени, y — за её значение.

Визуализация кривой

  • Точка (0,0) — старт анимации.
  • Точка (1,1) — её завершение.
  • Любая кривая, проходящая через промежуточные точки (x1, y1) и (x2, y2), изменяет скорость движения объекта.

Для анализа кривой часто используют графики, где ось X — это время, а ось Y — значение свойства.

Практические примеры

  1. Плавное ускорение и замедление (ease-in-out):
anime({
  targets: '.circle',
  scale: 2,
  duration: 1500,
  easing: 'cubicBezier(0.42, 0, 0.58, 1)'
});

Эта кривая ускоряет объект в начале и замедляет в конце.

  1. Замедление с “тормозным эффектом” (ease-out):
anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  easing: 'cubicBezier(0, 0, 0.58, 1)'
});

Объект быстро стартует и постепенно останавливается.

  1. Эффект “отскока” с отрицательными y:
anime({
  targets: '.square',
  translateY: 200,
  duration: 1200,
  easing: 'cubicBezier(0.68, -0.55, 0.27, 1.55)'
});

Значения y1 < 0 и y2 > 1 создают визуальный эффект перепрыгивания или overshoot.

Настройка кривой через инструменты

Существует множество визуальных редакторов cubic-bezier, таких как cubic-bezier.com, где можно наглядно тянуть контрольные точки и получать готовый код для anime.js. Это ускоряет подбор уникального поведения анимации.

Использование в комбинации с timeline

cubic-bezier отлично сочетается с anime.timeline для создания сложных последовательных анимаций. Например:

let tl = anime.timeline({
  easing: 'cubicBezier(.5, .05, .1, .3)',
  duration: 800
});

tl.add({
  targets: '.box',
  translateX: 250
})
.add({
  targets: '.box',
  translateY: 100,
  delay: 200
});

Каждый элемент timeline наследует указанную кривую, что позволяет поддерживать единый темп анимации на протяжении всей последовательности.

Советы по работе с cubic-bezier

  • Значения x должны оставаться в пределах [0,1], иначе браузер может игнорировать easing.
  • Экстремальные y значения (y < 0 или y > 1) создают интересные динамические эффекты, но могут выглядеть “нереалистично”.
  • Для тестирования сложных кривых удобно использовать интерактивные редакторы, а затем переносить полученные параметры в anime.js.

Сравнение с готовыми easing

Стандартное easing Эквивалент cubic-bezier
linear cubicBezier(0,0,1,1)
easeInQuad cubicBezier(0.55,0.085,0.68,0.53)
easeOutQuad cubicBezier(0.25,0.46,0.45,0.94)
easeInOutQuad cubicBezier(0.455,0.03,0.515,0.955)

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

Поддержка и совместимость

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

Оглавление