Пошаговое воспроизведение

Для работы с библиотекой anime.js достаточно подключить её через CDN или установить через npm.

CDN-подключение:

<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>

Установка через npm:

npm install animejs --save
import anime from 'animejs/lib/anime.es.js';

После подключения библиотека готова к использованию для анимации DOM-элементов, SVG, объектов и числовых значений.

Основные понятия

anime.js работает с объектами и их свойствами. Основные элементы:

  • targets — цель анимации (DOM-элемент, CSS-свойство, JS-объект);
  • properties — анимируемые свойства (translateX, opacity, scale, rotate и др.);
  • duration — длительность анимации в миллисекундах;
  • easing — функция сглаживания (linear, easeInOutQuad и т.д.);
  • delay — задержка перед началом анимации;
  • loop — количество повторов или бесконечный цикл;
  • direction — направление воспроизведения (normal, reverse, alternate).

Простейшая анимация выглядит так:

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

Пошаговое воспроизведение

Пошаговое воспроизведение анимации позволяет контролировать каждый кадр и этап анимации, останавливать, воспроизводить или изменять её динамически. В anime.js это достигается через объект анимации, возвращаемый функцией anime().

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

Важные методы управления:

  • play() — запуск анимации с текущего состояния;
  • pause() — приостановка;
  • restart() — перезапуск с начала;
  • reverse() — смена направления;
  • seek(time) — установка позиции анимации (в миллисекундах);
  • progress — процент выполнения анимации.

Пример пошагового управления:

animation.seek(500); // Перемещение к 0.5 секунде
animation.play();    // Продолжение воспроизведения
animation.pause();   // Остановка
animation.reverse(); // Обратное воспроизведение

Анимация нескольких шагов

Для создания сложных последовательностей используется массив объектов в keyframes. Каждый объект описывает отдельный этап анимации:

anime({
  targets: '.box',
  keyframes: [
    {translateX: 100, duration: 500},
    {translateY: 100, duration: 500},
    {rotate: '1turn', duration: 700}
  ],
  easing: 'easeInOutSine',
  autoplay: false
});

Такой подход позволяет пошагово воспроизводить анимацию:

const anim = anime({
  targets: '.box',
  keyframes: [
    {translateX: 100, duration: 500},
    {translateY: 100, duration: 500},
    {rotate: '1turn', duration: 700}
  ],
  easing: 'linear',
  autoplay: false
});

anim.seek(0); // начало
anim.play();  // воспроизведение

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

Анимации в anime.js поддерживают события, которые помогают управлять пошаговым воспроизведением:

  • begin — при старте анимации;
  • update — при каждом кадре анимации;
  • complete — при завершении.

Пример:

const anim = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  autoplay: false,
  update: function(anim) {
    console.log(`Прогресс: ${anim.progress.toFixed(1)}%`);
  },
  complete: function() {
    console.log('Анимация завершена');
  }
});

Метод update позволяет синхронизировать внешний код с текущим состоянием анимации и реализовать пошаговое воспроизведение с обратной связью.

Управление прогрессом вручную

Для создания эффекта «пошагового слайдера» удобно использовать seek() совместно с ползунком:

const slider = document.querySelector('#progressSlider');
slider.addEventListener('input', function() {
  anim.seek(anim.duration * (slider.value / 100));
});

Таким образом, пользователь может управлять положением анимации вручную, останавливать её на нужном кадре и возобновлять.

Анимация отдельных свойств по шагам

Можно анимировать несколько свойств отдельно, синхронизируя их через timeline:

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

timeline
  .add({
    targets: '.box',
    translateX: 200,
    duration: 500
  })
  .add({
    targets: '.box',
    rotate: '1turn',
    duration: 700
  })
  .add({
    targets: '.box',
    scale: 1.5,
    duration: 400
  });

timeline.seek(0); // начало
timeline.play();  // пошаговое воспроизведение

timeline позволяет контролировать последовательность шагов и комбинировать их с seek() и progress, создавая полное управление анимацией.

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

  • Использовать autoplay: false для анимаций, которые нужно пошагово контролировать.
  • Применять keyframes или timeline для сложных последовательностей.
  • Отслеживать прогресс через update или ползунки.
  • Для обратного воспроизведения использовать reverse().
  • Делить сложные анимации на небольшие логические шаги, чтобы легко управлять каждым этапом.
Оглавление