Бесконечные циклы

Бесконечные циклы в контексте SVG.js чаще всего реализуются через анимации, которые повторяются непрерывно. Для их создания используется метод .animate() с опцией loop(). Этот подход позволяет задавать постоянное движение объектов без необходимости вручную перезапускать анимацию.

const draw = SVG().addTo('body').size(300, 300);
const circle = draw.circle(50).fill('red').move(50, 50);

circle.animate(2000, '<>')
      .move(200, 50)
      .loop();

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

Управление скоростью и функциями перехода

Метод .animate() принимает три основных параметра:

  1. Длительность — время в миллисекундах.
  2. Функция перехода — задаёт кривую анимации (linear, <, > и др.).
  3. События завершения — callback-функция, вызываемая после окончания анимации.

Бесконечный цикл часто комбинируется с различными функциями перехода для создания более естественного движения. Например, < обозначает ускорение в начале, > — замедление в конце, а <> — сочетание ускорения и замедления.

rect.animate(1000, '<>').rotate(360).loop();

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

Использование loop() с обратным направлением

Для создания эффектов качания или пульсации можно использовать параметр true в методе loop():

rect.animate(800).scale(1.5).loop(true, true);
  • Первый параметр true — бесконечный цикл.
  • Второй параметр true — чередование направления: после достижения конца анимации объект возвращается к исходному состоянию.

Такой подход особенно полезен для плавного увеличения и уменьшения размера элементов, создания дыхательного эффекта или движения «туда-сюда».

Комбинирование нескольких анимаций

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

circle.animate(1500, '<>').move(200, 200).loop(true, true);
circle.animate(1500, '<>').fill({ color: '#00f' }).loop(true, true);

В данном случае круг одновременно перемещается и меняет цвет. Метод .loop() гарантирует, что обе анимации будут повторяться бесконечно, создавая синхронизированный эффект.

Управление анимациями через переменные

Для гибкого контроля полезно сохранять анимации в переменные:

const anim = rect.animate(1000).rotate(360).loop();

Это позволяет в любой момент остановить или изменить анимацию:

anim.stop();        // Прекращает анимацию
anim.speed(2);      // Ускоряет анимацию в два раза
anim.loop(false);   // Прекращает бесконечный цикл

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

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

  • Мигающие индикаторы — объекты меняют прозрачность или цвет, привлекая внимание.
  • Пульсирующие кнопки — кнопки увеличиваются и уменьшаются при наведении.
  • Движущиеся графические объекты — объекты на графике или карте, демонстрирующие поток данных.
const pulse = draw.circle(40).fill('green').center(150, 150);
pulse.animate(600).scale(1.3).loop(true, true);

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

Совместимость с SVG.js 3.x

В версии 3.x библиотека упростила работу с бесконечными циклами:

  • Метод .loop() теперь поддерживает передачу функции обратного вызова для контроля каждого повторения.
  • Методы .animate() и .loop() полностью совместимы с современными браузерами без полифиллов.
  • Анимации могут быть прерваны, ускорены или изменены в процессе исполнения, что повышает гибкость разработки динамических интерфейсов.
rect.animate(1200)
    .move(300, 50)
    .loop(true, false, () => console.log('Повтор завершён'));

Функция обратного вызова позволяет выполнять дополнительную логику на каждом повторении цикла.

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

  • Использовать бесконечные циклы только для визуальных элементов, где постоянное движение оправдано.
  • Избегать запуска слишком большого количества одновременно работающих бесконечных анимаций — это влияет на производительность.
  • Комбинировать loop() с speed(), pause() и stop() для динамического контроля.
  • Использовать функции перехода для создания естественного движения и избегания монотонности.

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

Оглавление