Метод animate() и его параметры

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

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

element.animate(duration, delay, easing)
  • duration — длительность анимации в миллисекундах или секундах (например, 1000 или '1s'). Обязательный параметр.
  • delay — необязательная задержка перед началом анимации в миллисекундах. По умолчанию 0.
  • easing — функция интерполяции или её название. Позволяет задавать кривые ускорения и замедления анимации. Стандартные значения: 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'bounce', 'elastic'.

Метод возвращает объект Animator, на котором можно вызвать дальнейшие методы для задания свойств анимации.

Примеры использования animate()

1. Простая анимация изменения размера

let rect = draw.rect(100, 100).fill('#f06');
rect.animate(1000).width(200).height(200);

В этом примере прямоугольник плавно увеличит ширину и высоту до 200 пикселей за 1000 мс.

2. Анимация с задержкой и функцией easing

circle.animate(1500, 500, '<>').radius(80);
  • 1500 — длительность анимации 1.5 секунды
  • 500 — задержка 0.5 секунды перед началом
  • '<>' — стандартная кривая «ease-in-out», аналог ease-in-out

Элемент плавно изменит радиус на 80.

Методы Animator для задания свойств

Метод animate() возвращает объект аниматора, у которого есть несколько полезных методов:

  • .attr() — анимирует атрибуты SVG, например cx, cy, fill.

    rect.animate(1000).attr({ x: 200, y: 100, fill: '#0f6' });

  • .size() — анимирует размеры элемента (ширину и высоту).

    rect.animate(800).size(150, 150);

  • .move() — анимирует позицию элемента.

    rect.animate(500).move(300, 200);

  • .transform() — анимирует трансформации, такие как rotate, scale, skew.

    rect.animate(1200).transform({ rotate: 45, scale: 1.5 });

  • .during() — задаёт callback-функцию, вызываемую на каждом кадре анимации.

    rect.animate(1000).during((pos, morph, eased) => {
  console.log(eased); // значение eased от 0 до 1
});

  • .after() — выполняет callback после завершения анимации.

    rect.animate(1000).after(() => console.log('Анимация завершена'));

  • .loop(times, reverse) — повторяет анимацию указанное количество раз.

    rect.animate(500).loop(3, true); // 3 раза с обратным воспроизведением

Параметры easing

Функции интерполяции управляют скоростью изменения свойств:

  • linear — равномерная скорость
  • <> / ease-in-out — медленно в начале и конце, быстрее в середине
  • < / ease-in — медленно в начале
  • > / ease-out — медленно в конце
  • bounce — эффект «отскока»
  • elastic — эффект «резинового» движения

Можно использовать кастомные функции easing:

function myEasing(pos) {
  return pos * pos; // квадратичное ускорение
}
rect.animate(1000, 0, myEasing).width(200);

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

SVG.js позволяет создавать последовательные и параллельные анимации:

  • Последовательные:
rect.animate(500).width(200).after(() => rect.animate(500).height(200));
  • Параллельные:
rect.animate(500).width(200);
rect.animate(500).height(200);

Советы по использованию

  1. Минимизировать использование глобальных таймеров — animate() сам управляет кадрами.
  2. Использовать .during() для плавных эффектов, зависящих от прогресса анимации.
  3. Кастомные easing-функции позволяют создавать уникальные динамики движения.
  4. Комбинировать .loop() и .after() для сложных анимационных сцен.
  5. Оптимизация трансформаций: анимировать transform() быстрее, чем изменять отдельные координаты для сложных объектов.

Метод animate() является гибкой основой для всех видов анимаций в SVG.js — от простого изменения размеров до сложных комбинированных трансформаций с индивидуальной кривой скорости. Правильное использование его параметров обеспечивает плавность, точность и выразительность визуальных эффектов.

Оглавление