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

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

Принцип работы

Анимация в Snap.svg задается методом animate, который принимает четыре ключевых аргумента: свойства для анимации, длительность, функция easing и коллбэк. Синтаксис:

element.animate(properties, duration, easing, callback);
  • properties – объект с CSS-свойствами или атрибутами SVG, которые нужно анимировать.
  • duration – длительность анимации в миллисекундах.
  • easing – функция плавности, определяющая характер движения.
  • callback – функция, вызываемая после завершения анимации.

Функция easing определяет распределение времени по изменениям свойств. Например, линейная анимация изменяет значение равномерно, а функция mina.easein ускоряет движение в начале.

Встроенные функции плавности

Snap.svg включает в себя объект mina, содержащий основные функции easing:

Функция Характеристика
mina.linear Линейное равномерное изменение.
mina.easein Замедление в начале анимации, ускорение к концу.
mina.easeout Быстрый старт с замедлением в конце.
mina.easeinout Комбинированная – медленно в начале и конце, быстрее в середине.
mina.backin Движение начинается с небольшого обратного отката.
mina.backout Завершение с эффектом отскока назад.
mina.elastic Имитация упругого движения с колебаниями.
mina.bounce Эффект подпрыгивания.

Пример использования:

var s = Snap(400, 400);
var circle = s.circle(50, 200, 30);

circle.animate({ cx: 350 }, 2000, mina.easeinout);

В этом примере круг плавно перемещается по горизонтали, замедляясь в начале и в конце.

Создание пользовательских функций easing

Snap.svg позволяет создавать кастомные функции плавности. Любая функция должна принимать один параметр t (время от 0 до 1) и возвращать значение в том же диапазоне, которое определяет текущую позицию анимируемого свойства.

Пример создания функции «ускорение с замедлением и пиком»:

function customEasing(t) {
    return t < 0.5 
        ? 4 * t * t * t 
        : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

circle.animate({ cy: 50 }, 1500, customEasing);

Здесь t плавно увеличивается, ускоряясь в начале и замедляясь к концу, с дополнительным пиковым эффектом в середине.

Комбинирование анимаций и easing

Snap.svg поддерживает последовательные и параллельные анимации. Каждой анимации можно назначить отдельную функцию easing:

var rect = s.rect(50, 50, 100, 100);

rect.animate({ x: 300 }, 1000, mina.easein, function() {
    this.animate({ y: 300 }, 1000, mina.elastic);
});

В этом примере прямоугольник сначала перемещается по оси X с ускорением, а затем «прыгает» по оси Y с эффектом упругости.

Настройка динамических анимаций через easing

Для динамических эффектов полезно связывать функции easing с физическими моделями движения, например:

  • Имитация гравитации – плавное ускорение вниз с замедлением при соприкосновении с поверхностью, используя mina.bounce.
  • Плавное вращение – сочетание mina.easeinout для медленного старта и замедления к концу.

Пример:

var ball = s.circle(200, 50, 20);

ball.animate({ cy: 350 }, 1200, mina.bounce, function() {
    ball.animate({ cy: 50 }, 1200, mina.easeinout);
});

Мяч подпрыгивает с эффектом гравитации и возвращается вверх с плавным замедлением.

Практические советы

  • Для коротких анимаций чаще используют mina.easeout для естественного ускоренного старта.
  • Для длительных движений эффективны mina.easeinout или mina.elastic для визуальной выразительности.
  • Пользовательские функции easing позволяют имитировать сложные физические процессы, включая трение, упругость и колебания.
  • Комбинирование нескольких функций easing в последовательной анимации добавляет динамики и реализма.

Заключение по применению

Функции плавности в Snap.svg — это не просто декоративный эффект, а инструмент управления темпом и характером движения элементов SVG. Правильный выбор easing позволяет создавать естественные и выразительные анимации, управлять вниманием зрителя и улучшать визуальное восприятие интерфейса.

Оглавление