Restart и reverse

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

Метод restart

Метод restart полностью перезапускает анимацию с начала. Он полезен, когда необходимо повторить анимацию после её завершения или при определённом событии.

Синтаксис

animeInstance.restart();
  • animeInstance — объект анимации, созданный через anime({...}).
  • Метод сбрасывает текущее состояние анимации и запускает её заново, учитывая все начальные параметры (targets, duration, easing, delay и т.д.).

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

const boxAnimation = anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad',
  autoplay: false
});

// Запуск анимации
boxAnimation.play();

// Перезапуск после завершения
document.querySelector('#restartButton').addEventListener('click', () => {
  boxAnimation.restart();
});

Особенности метода restart:

  • Если анимация уже воспроизводится, restart мгновенно возвращает её к начальному состоянию и запускает заново.
  • Сбрасываются все внутренние таймеры, прогресс и события, такие как begin и complete, будут вызваны повторно.
  • Поддерживается как для одиночных анимаций, так и для timeline.

Метод reverse

Метод reverse изменяет направление анимации на противоположное. Если анимация движется вперёд, она начнёт воспроизводиться назад, и наоборот.

Синтаксис

animeInstance.reverse();
  • animeInstance — объект анимации.
  • Переключает внутреннее свойство direction между 'normal' и 'reverse'.

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

const circleAnimation = anime({
  targets: '.circle',
  translateY: 200,
  duration: 1200,
  easing: 'easeInOutSine',
  autoplay: false
});

// Запуск анимации
circleAnimation.play();

// Изменение направления по клику
document.querySelector('#reverseButton').addEventListener('click', () => {
  circleAnimation.reverse();
  circleAnimation.play();
});

Особенности метода reverse:

  • Не сбрасывает анимацию, сохраняется текущее состояние.
  • Можно комбинировать с play, pause и seek для создания интерактивного управления.
  • В timeline reverse влияет на все дочерние анимации, если вызван на timeline-объекте.

Комбинирование restart и reverse

Для создания сложных эффектов, таких как анимации «туда и обратно», методы restart и reverse часто используют вместе:

const lineAnimation = anime({
  targets: '.line',
  translateX: 300,
  duration: 800,
  easing: 'easeInOutCubic',
  autoplay: false
});

let forward = true;

document.querySelector('#toggleButton').addEventListener('click', () => {
  if (forward) {
    lineAnimation.reverse();
  } else {
    lineAnimation.restart();
  }
  lineAnimation.play();
  forward = !forward;
});

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

Работа с timeline

Timeline в anime.js позволяет объединять несколько анимаций и управлять ими как единым объектом. Методы restart и reverse применяются к timeline полностью:

const timeline = anime.timeline({
  autoplay: false
});

timeline
  .add({
    targets: '.box1',
    translateX: 100,
    duration: 500
  })
  .add({
    targets: '.box2',
    translateY: 100,
    duration: 500
  });

timeline.play();

// Обратное воспроизведение всей последовательности
timeline.reverse();
timeline.play();

// Полный перезапуск timeline
timeline.restart();

Особенности применения на timeline:

  • reverse меняет направление всех дочерних анимаций.
  • restart сбрасывает timeline к начальной позиции и запускает все анимации последовательно.
  • Совместимо с методами seek и pause для детального контроля.

Рекомендации по использованию

  1. Интерактивные эффекты: Комбинация reverse и restart позволяет создавать анимации с откликом на действия пользователя, например кнопки, скролл или события мыши.
  2. Повторяющиеся анимации: Использование restart идеально подходит для циклических анимаций или всплывающих уведомлений.
  3. Сочетание с timeline: Контроль timeline через эти методы облегчает управление сложными многослойными анимациями без необходимости управлять каждой анимацией отдельно.

Хотите, я могу подготовить расширенный раздел с реальными примерами интерактивных анимаций с кнопками и событиями, где restart и reverse используются в одной логике для веб-интерфейсов? Это будет полноценный учебный кейс для продвинутого практического изучения anime.js.

Оглавление