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

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

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

element.animate(attributes, duration, easing, callback)
  • attributes – объект с конечными значениями свойств, которые нужно анимировать.
  • duration – длительность анимации в миллисекундах.
  • easing – функция интерполяции (по умолчанию mina.linear).
  • callback – функция, вызываемая после завершения анимации.

Основные анимируемые свойства

Для большинства SVG-элементов доступны следующие атрибуты:

  • x, y – координаты положения.
  • cx, cy, r – центр и радиус окружности.
  • width, height – размеры прямоугольников и изображений.
  • fill, stroke – цвет заливки и обводки.
  • strokeWidth – толщина линии.
  • opacity – прозрачность элемента.
  • transform – трансформации (translate, rotate, scale и др.).

Snap.svg автоматически интерполирует значения числовых свойств, а для цветовых свойств выполняется плавный переход между исходным и конечным цветом.

Временные функции (easing)

Easing определяет, как изменяются значения свойств с течением времени. Snap.svg поставляется с набором стандартных функций через объект mina:

  • mina.linear – линейное изменение, постоянная скорость.
  • mina.easein – постепенное ускорение.
  • mina.easeout – замедление к концу анимации.
  • mina.easeinout – комбинированное ускорение и замедление.
  • mina.backin, mina.backout, mina.elastic, mina.bounce – более сложные кривые для динамических эффектов.

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

circle.animate({cx: 300}, 1000, mina.easeinout);

Здесь круг плавно переместится до координаты cx = 300 за 1 секунду с эффектом ускорения и замедления.

Цепочки и последовательные анимации

Для создания последовательных анимаций удобно использовать callback:

rect.animate({x: 200}, 500, mina.linear, function() {
    this.animate({y: 100}, 500, mina.easeout);
});

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

Анимация трансформаций

Snap.svg поддерживает анимацию трансформаций через строку transform.

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

element.animate({ transform: "r45,50,50 s1.5,1.5" }, 1000, mina.easeinout);
  • r45,50,50 – вращение на 45° вокруг точки (50, 50).
  • s1.5,1.5 – масштабирование по горизонтали и вертикали на 1.5 раза.

Метод автоматически интерполирует численные значения, создавая плавное движение.

Одновременная анимация нескольких свойств

Snap.svg позволяет изменять несколько свойств одновременно:

element.animate({x: 100, y: 50, fill: "#f00", opacity: 0.5}, 800, mina.easeinout);

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

Важно, что все анимируемые свойства должны быть совместимы с интерполяцией. Цвета и числа обрабатываются отдельно, строки трансформации требуют корректного синтаксиса.

Управление анимацией

  • Остановка анимации: element.stop() мгновенно прекращает текущую анимацию.
  • Повторение: для циклических эффектов можно использовать рекурсивные функции с callback.

Пример бесконечной анимации:

function bounce(el) {
    el.animate({cy: 200}, 500, mina.bounce, function() {
        el.animate({cy: 100}, 500, mina.bounce, function() {
            bounce(el);
        });
    });
}
bounce(circle);

Настройка скорости и длительности

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

  • Короткая длительность = быстрая анимация.
  • Длинная длительность = медленная, плавная анимация.

Пример медленной анимации:

rect.animate({x: 300}, 3000, mina.easeinout);

Плавные цветовые переходы

Snap.svg поддерживает анимацию цвета, включая fill и stroke. Цвета можно задавать в формате HEX, RGB или именем:

element.animate({fill: "#00f"}, 1000, mina.linear);

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

Анимация с использованием кривых Безье

С помощью функции mina можно создавать свои кривые интерполяции, используя mina.custom(a, b, c, d) для специфических эффектов ускорения и замедления.

Пример:

element.animate({x: 400}, 1000, mina.custom(0.42, 0, 0.58, 1));

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

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

Оглавление