События анимации

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

Основные методы для управления событиями анимации

  1. animate() – базовый метод для создания анимации элемента. Возвращает объект анимации, к которому можно привязать события.
const rect = draw.rect(100, 100).fill('#f06');
const animation = rect.animate(1000, '<>').move(200, 200);

  1. during(callback) – вызывается на каждом кадре анимации. Параметры callback:

    • pos – текущая позиция анимации от 0 до 1.
    • morph – текущее значение промежуточного состояния анимируемого свойства.
animation.during((pos, morph) => {
    console.log(`Позиция: ${pos}, текущее значение: ${morph}`);
});
  1. after(callback) – срабатывает после завершения анимации.
animation.after(() => {
    console.log('Анимация завершена');
});
  1. loop(times, reverse) – позволяет повторять анимацию заданное количество раз. Второй параметр reverse задает чередование направления анимации.
animation.loop(3, true);

Управление событиями начала и окончания

  • onStart(callback) – вызывается в момент начала анимации.
  • onFinish(callback) – срабатывает при полном завершении анимации.
animation.onStart(() => console.log('Начало анимации'));
animation.onFinish(() => console.log('Конец анимации'));

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

События при изменении состояния

Метод during() позволяет не только отслеживать прогресс, но и изменять свойства других элементов динамически:

const circle = draw.circle(50).fill('blue');

rect.animate(2000).move(300, 300).during((pos) => {
    circle.radius(50 + 50 * pos); // изменение радиуса в зависимости от позиции
});

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

Прерывание и управление анимацией

  • stop() – мгновенно останавливает анимацию.
  • pause() и play() – позволяют приостанавливать и возобновлять анимацию.
animation.pause();
setTimeout(() => animation.play(), 1000); // возобновление через 1 секунду

Прерывание анимации автоматически вызывает события onFinish, если анимация завершается досрочно.

Комбинирование событий и цепочек анимации

SVG.js поддерживает цепочку анимаций с использованием after() и колбеков:

rect.animate(1000).move(200, 0)
    .after(() => rect.animate(1000).move(200, 200)
    .after(() => rect.animate(1000).move(0, 200))
    .after(() => rect.animate(1000).move(0, 0))));

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

Использование событий для синхронизации с внешними действиями

События анимации можно привязывать к DOM-событиям, создавая интерактивные эффекты:

rect.on('click', () => {
    rect.animate(500).rotate(180).after(() => console.log('Вращение завершено'));
});

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

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

  • Для отслеживания прогресса анимации использовать during(), так как это единственный метод с доступом к pos и morph.
  • Для цепочек анимаций использовать after(), избегая ручного управления таймерами.
  • События onStart и onFinish удобны для логирования и синхронизации внешних эффектов.
  • Комбинация pause() и play() позволяет создавать управляемые анимации, полезные для презентаций или интерактивных визуализаций.

Особенности работы с несколькими анимациями

При запуске нескольких анимаций на одном элементе важно помнить:

  • Каждая анимация создается отдельно и имеет собственный объект.
  • События during(), after(), onStart() привязаны к конкретной анимации.
  • Для последовательного выполнения нескольких анимаций нужно использовать after() или промисы через animate().finished().
rect.animate(500).move(100, 0)
    .after(() => rect.animate(500).move(100, 100));

Это предотвращает конфликты и обеспечивает предсказуемое поведение анимации.

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

Оглавление