Метод animate()

Метод animate() является ключевым инструментом для создания анимаций в Snap.svg. Он позволяет плавно изменять свойства SVG-элементов с контролем времени, задержки и кривых анимации. Использование этого метода обеспечивает динамичность и интерактивность графических элементов в веб-приложениях.

Синтаксис метода

element.animate(attrs, duration, easing, callback)
  • attrs — объект с набором свойств, которые должны измениться. Например, координаты, размеры, цвет и другие атрибуты SVG.
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания движения (необязательный параметр). Snap.svg поддерживает стандартные кривые: mina.linear, mina.easein, mina.easeout, mina.easeinout.
  • callback — функция, вызываемая после завершения анимации (необязательный параметр).

Пример:

var circle = s.circle(50, 50, 40);
circle.animate({ cx: 150, cy: 150, r: 30 }, 1000, mina.easeinout, function() {
    console.log("Анимация завершена");
});

Атрибуты, изменяемые через animate()

Метод animate() может работать с большинством атрибутов SVG:

  • Позиция и размеры: cx, cy, r, x, y, width, height
  • Цветовые атрибуты: fill, stroke, stroke-width
  • Прозрачность: opacity
  • Трансформации: transform

Пример изменения трансформации:

rect.animate({ transform: "r45,100,100 s1.5" }, 1500, mina.easeout);

В этом примере выполняется поворот на 45° вокруг точки (100, 100) и масштабирование в 1.5 раза.

Кривые анимации (Easing)

Snap.svg использует библиотеку Mina для интерполяции значений. Основные типы кривых:

  • mina.linear — линейное движение
  • mina.easein — замедление в начале анимации
  • mina.easeout — замедление в конце
  • mina.easeinout — плавное ускорение и замедление

Пример с различными кривыми:

circle.animate({ cx: 200 }, 1000, mina.easein);
circle.animate({ cx: 50 }, 1000, mina.easeout);

Последовательные и параллельные анимации

animate() поддерживает цепочку вызовов через callback, что позволяет создавать сложные последовательные анимации.

circle.animate({ cx: 200 }, 1000, mina.linear, function() {
    circle.animate({ cy: 200 }, 1000, mina.easeinout);
});

Для параллельных анимаций достаточно вызвать animate() для разных свойств или разных элементов одновременно.

Анимация цвета

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

rect.animate({ fill: "#ff0000", stroke: "#0000ff" }, 2000, mina.easeinout);

Snap.svg автоматически преобразует цвета в формат RGB и интерполирует компоненты для создания плавного перехода.

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

Анимацию можно остановить в любой момент с помощью метода stop():

circle.animate({ cx: 200 }, 2000, mina.linear);
circle.stop(); // мгновенно прекращает анимацию

Метод stop() полезен для интерактивных сценариев, когда необходимо отменить текущую анимацию и задать новую.

Анимация сложных трансформаций

Метод animate() позволяет комбинировать трансформации: смещение, поворот, масштабирование и наклон.

circle.animate({ transform: "t100,0 r45 s2" }, 1500, mina.easeinout);

Здесь выполняется последовательная комбинация:

  • t100,0 — сдвиг по X
  • r45 — поворот на 45°
  • s2 — масштабирование в 2 раза

Snap.svg корректно интерполирует эти параметры, создавая плавную анимацию.

Анимация атрибутов, зависящих от числа

Для числовых атрибутов (например, r, cx, cy) Snap.svg выполняет линейную интерполяцию значений. При необходимости создания нелинейных анимаций можно использовать кривые Mina и комбинировать их с функцией callback для получения эффекта ускорения, замедления или отскока.

Примеры сложных анимаций

  1. Пульсирующий круг
circle.animate({ r: 60 }, 500, mina.easeinout, function() {
    circle.animate({ r: 40 }, 500, mina.easeinout, arguments.callee);
});
  1. Движение по диагонали с поворотом
rect.animate({ transform: "t150,150 r90" }, 2000, mina.easeinout);
  1. Цветовой переход с изменением прозрачности
rect.animate({ fill: "#00ff00", opacity: 0.5 }, 1000, mina.easein);

Метод animate() в Snap.svg обеспечивает мощный и гибкий инструмент для работы с динамическими графическими эффектами. Он объединяет плавное изменение атрибутов, управление временем, кривые анимации и последовательные трансформации, позволяя создавать сложные визуальные сценарии с минимальным количеством кода.

Оглавление