Направление анимации

В anime.js направление анимации управляется через несколько ключевых свойств и методов, которые задают последовательность и траекторию изменений объектов. Основное управление направлением происходит через свойства direction, loop и reverse.

Свойство direction

Свойство direction определяет, в каком порядке будут выполняться анимации:

  • normal – анимация проходит от начального состояния к конечному один раз.

    anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  direction: 'normal'
});

  • reverse – анимация выполняется в обратном порядке, от конечного состояния к начальному.

    anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  direction: 'reverse'
});

  • alternate – чередует прямое и обратное движение на каждой итерации.

    anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  direction: 'alternate',
  loop: true
});

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

    anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  direction: 'alternate-reverse',
  loop: true
});

Ключевой момент: direction особенно полезно при использовании совместно с loop, создавая бесконечные циклы движения.

Метод reverse()

Для динамического изменения направления анимации в процессе выполнения используется метод .reverse(). Этот метод меняет текущую траекторию на противоположную.

const animation = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000
});

setTimeout(() => {
  animation.reverse(); // направление меняется на обратное
  animation.play();
}, 1000);

Особенность: .reverse() не меняет начальные и конечные значения, оно инвертирует текущее направление анимации, сохраняя прогресс.

Анимация по ключевым кадрам (keyframes)

При использовании ключевых кадров направление движения может управляться более тонко. Для этого задаются массивы объектов с конкретными значениями свойств, которые анимируются последовательно:

anime({
  targets: '.box',
  keyframes: [
    { translateX: 0 },
    { translateX: 100 },
    { translateX: 50 },
    { translateX: 150 }
  ],
  duration: 4000,
  easing: 'easeInOutQuad',
  direction: 'alternate'
});

Примечание: при direction: 'alternate' последовательность keyframes автоматически выполняется в обратном порядке после завершения первого цикла.

Управление кривой движения и направлением

Для плавного управления направлением анимации применяются easing функции. Они позволяют задавать ускорение и замедление по конкретной оси движения, что создаёт визуальный эффект изменения траектории:

anime({
  targets: '.box',
  translateX: 200,
  translateY: 100,
  duration: 1500,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

Разделение осей (translateX, translateY) позволяет создавать диагональные и сложные траектории. Ключевой момент: easing работает отдельно для каждой оси, что даёт полный контроль над направлением движения.

Синхронизация нескольких анимаций

Направление может комбинироваться с последовательной анимацией нескольких объектов через timeline:

const tl = anime.timeline({
  direction: 'alternate',
  loop: true
});

tl.add({
  targets: '.box1',
  translateX: 200,
  duration: 1000
})
.add({
  targets: '.box2',
  translateY: 100,
  duration: 1000
});

Особенности timeline:

  • Каждый блок анимации наследует direction timeline.
  • offset позволяет задавать задержку запуска отдельных анимаций относительно общей последовательности.
  • Методы play(), pause(), reverse() можно применять к всей последовательности.

Использование функций для динамического направления

Свойства translateX, translateY и другие можно задавать как функции для изменения направления в зависимости от индекса или текущего состояния:

anime({
  targets: '.box',
  translateX: function(el, i) {
    return i % 2 === 0 ? 200 : -200;
  },
  duration: 1000,
  direction: 'alternate',
  loop: true
});

Эффект: чередование направлений для разных элементов создаёт ощущение более живой анимации.

Управление анимацией через progress и seek

Для точного контроля направления и позиции анимации применяются методы seek() и свойство progress:

const animation = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  autoplay: false
});

animation.seek(1500); // перемещает анимацию к 1500 мс
animation.reverse();  // меняет направление с текущего момента
animation.play();

Применение: полезно для интерактивных анимаций, где направление зависит от действий пользователя (например, скролл, свайп, клик).

Оглавление