Циклы и повторения

В библиотеке anime.js анимации могут быть повторяемыми, цикличными или зацикленными с различными условиями. Для управления повторением используются свойства loop и direction, а также комбинации с временными функциями easing и delay.

Свойство loop

Свойство loop определяет количество повторов анимации:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  loop: 3 // Анимация повторится 3 раза
});
  • Значение число задаёт точное количество повторов.
  • Значение true делает анимацию бесконечной:
anime({
  targets: '.box',
  rotate: 360,
  duration: 2000,
  loop: true // бесконечное вращение
});

Свойство direction

direction управляет направлением анимации при повторении. Возможные значения:

  • normal – обычное движение по ключевым кадрам.
  • reverse – воспроизведение анимации в обратном порядке.
  • alternate – чередование прямого и обратного направления на каждом цикле.
  • alternate-reverse – чередование, начиная с обратного направления.

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

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  loop: 4,
  direction: 'alternate' // движение туда и обратно
});

Особенность: при direction: 'alternate' первый цикл идёт в прямом направлении, второй – в обратном, и так далее.

Комбинация loop и delay

Для создания более сложных повторений можно комбинировать loop и delay. Например, пауза между циклами:

anime({
  targets: '.circle',
  scale: [1, 2],
  duration: 800,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutSine',
  delay: 500 // пауза между повторениями
});
  • delay срабатывает перед каждой итерацией анимации.
  • Можно использовать функцию для динамического управления задержкой:
anime({
  targets: '.circle',
  translateY: 100,
  loop: true,
  direction: 'alternate',
  delay: function(el, i) {
    return i * 200; // смещение каждой фигуры
  }
});

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

Свойство direction удобно совмещать с ключевыми кадрами (keyframes) для создания обратных или цепных анимаций:

anime({
  targets: '.box',
  keyframes: [
    {translateX: 250},
    {translateY: 150},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  loop: true,
  direction: 'alternate'
});

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

Повторения с функцией update

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

let count = 0;

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  loop: true,
  direction: 'alternate',
  update: function(anim) {
    if(anim.progress === 100) {
      count++;
      console.log('Цикл завершён:', count);
    }
  }
});
  • anim.progress – процент завершения текущего цикла.
  • Позволяет вести счётчик повторений, запускать дополнительные действия после определённого числа циклов.

Циклы с разными временными функциями

Можно комбинировать циклы с различными функциями easing для создания эффекта ускорения или замедления на каждом повторе:

anime({
  targets: '.circle',
  translateY: 200,
  duration: 1200,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
});
  • При direction: 'alternate' анимация плавно ускоряется и замедляется в каждом направлении.
  • Для более динамичных эффектов можно менять easing через keyframes:
anime({
  targets: '.circle',
  keyframes: [
    {translateY: 100, easing: 'easeOutBounce'},
    {translateY: 0, easing: 'easeInQuad'}
  ],
  loop: true,
  direction: 'alternate'
});

Практические приёмы

  1. Бесконечные пульсации: Используется комбинация scale, loop: true и direction: 'alternate'.

  2. Многоэлементные цепочки: Задержки через функцию delay создают эффект волны между элементами.

  3. Комбинирование с timeline: Timeline позволяет синхронизировать циклы разных анимаций с разной продолжительностью и направлениями.

let tl = anime.timeline({loop: true});
tl.add({
  targets: '.box1',
  translateX: 250,
  duration: 1000,
  direction: 'alternate'
})
.add({
  targets: '.box2',
  translateY: 200,
  duration: 1200,
  direction: 'alternate',
  offset: '-=500' // перекрытие циклов
});

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

Циклы и повторения в anime.js – это мощный инструмент для динамических интерфейсов, плавных пульсаций, непрерывного движения и создания визуальных эффектов, управляемых с высокой точностью через параметры loop, direction, delay, keyframes и timeline.

Оглавление