Функции плавности (easing)

Функции плавности (easing) используются для управления скоростью анимации, создавая визуально естественные движения объектов. В SVG.js easing задается при работе с методами .animate() и .during(), позволяя менять ускорение и замедление анимации.

Применение easing в анимации

В SVG.js анимация создается через цепочку методов. Основной синтаксис с easing выглядит так:

rect.animate(1000, '<>').move(200, 200);

Здесь:

  • 1000 — продолжительность анимации в миллисекундах.
  • '<>' — тип функции плавности (easing).
  • .move(200, 200) — конечные координаты объекта.

Функции плавности обозначаются символами или именами:

Символ/Имя Описание
'linear' Линейное движение, скорость постоянная.
'<' Замедление в начале анимации (ease-in).
'>' Замедление в конце анимации (ease-out).
'<>' Замедление в начале и конце (ease-in-out).

Также поддерживаются расширенные типы easing через библиотеку SVG.Easing, включая bounce, elastic, back и пользовательские кривые Безье.

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

Линейное движение (linear)

circle.animate(1500, 'linear').radius(50);

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

Ease-in (<)

rect.animate(1000, '<').move(300, 0);

Анимация начинается медленно и ускоряется к концу. Используется для эффектов «разгона» объектов.

Ease-out (>)

rect.animate(1000, '>').move(300, 0);

Анимация начинается быстро и замедляется к концу. Подходит для плавного завершения движения.

Ease-in-out (<>)

rect.animate(1000, '<>').move(300, 0);

Комбинированная функция, объект медленно ускоряется в начале и замедляется в конце, создавая максимально естественное движение.

Пользовательские кривые Безье

SVG.js поддерживает произвольные кривые Безье для точной настройки плавности. Формат:

rect.animate(1000, 'cubic-bezier(x1, y1, x2, y2)').move(300, 0);

Где x1, y1, x2, y2 — контрольные точки кривой, задающие ускорение и замедление.

Пример мягкой кривой:

rect.animate(1200, 'cubic-bezier(0.25, 0.1, 0.25, 1)').move(400, 0);

Эта кривая создает плавное ускорение и замедление, близкое к стандартному ease-in-out.

Расширенные функции: bounce, elastic, back

SVG.js позволяет использовать динамические функции, имитирующие физику:

  • Bounce – имитация подпрыгивания:
rect.animate(1500, 'bounce').move(200, 200);
  • Elastic – эффект упругого растяжения и отскока:
rect.animate(2000, 'elastic').move(300, 300);
  • Back – движение с небольшим откатом назад перед стартом или финишем:
rect.animate(1000, 'back').move(250, 250);

Каждая из этих функций делает анимацию более выразительной, позволяя создавать эффекты «живости» объектов на сцене.

Связывание easing с цепочками анимаций

Функции плавности можно комбинировать при последовательных анимациях:

rect.animate(1000, '<>').move(200, 0)
    .animate(500, '>').fill('#f06');

В этом примере движение выполняется с easing ease-in-out, а смена цвета — с easing ease-out. Цепочки позволяют точно контролировать каждый этап анимации.

Использование .during() для динамического контроля

Метод .during() позволяет изменять параметры объекта на каждом кадре с учетом easing:

rect.animate(1000, '<>').during(function(pos, morph, eased){
    this.cx(100 + 200 * eased);
});
  • pos — текущая позиция анимации от 0 до 1.
  • eased — значение после применения функции easing.
  • morph — текущий прогресс между стартовым и конечным состоянием.

Так можно создавать кастомные анимации, которые не ограничиваются стандартными свойствами.

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

  • Для плавного движения объектов чаще всего используют <>' (ease-in-out).
  • Для визуально динамичных эффектов полезны bounce и elastic.
  • Линейные анимации подходят для простых трансформаций без акцента на «живость».
  • Пользовательские кривые Безье дают максимальный контроль над скоростным графиком анимации.

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

Оглавление