Steps-анимация

Steps-анимация — это тип временной функции (easing) в anime.js, который разбивает анимацию на дискретные шаги. В отличие от линейной или плавной кривой Безье, steps создает резкое, «кубиковое» изменение значений, идеально подходящее для имитации кадровых анимаций, анимации спрайтов или переключения классов по шагам.

В anime.js steps задаются с помощью строки 'steps(N)', где N — количество шагов. Каждый шаг соответствует промежутку, на котором значение свойства сохраняется до следующего изменения.

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

anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  easing: 'steps(5)'
});

В этом примере элемент .box перемещается по оси X на 300 пикселей, но движение разбито на 5 резких шагов, вместо плавного перемещения.

Синтаксис steps и его вариации

Формат функции easing для steps:

'easing: steps(N, direction)'

  • N — количество шагов.

  • direction — необязательный параметр, который может принимать значения:

    • 'start' — изменение происходит в начале шага.
    • 'end' — изменение происходит в конце шага (значение по умолчанию).

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

anime({
  targets: '.box',
  translateY: 200,
  duration: 2000,
  easing: 'steps(4, start)'
});

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

Применение steps-анимации для спрайтов

Steps-анимация особенно полезна для анимации спрайтов, где необходимо менять позицию фона элемента по кадрам.

Пример:

anime({
  targets: '.sprite',
  backgroundPositionX: ['0px', '-512px'],
  duration: 1000,
  easing: 'steps(8)',
  loop: true
});

Здесь фон .sprite смещается по горизонтали на 512 пикселей, разделенных на 8 шагов, что соответствует 8 кадрам спрайта. Плавного перехода между кадрами нет — каждый кадр появляется мгновенно.

Комбинирование steps с другими анимациями

Steps можно использовать не только для перемещения, но и для любых числовых свойств: opacity, scale, rotate, color.

Пример анимации прозрачности с дискретными шагами:

anime({
  targets: '.circle',
  opacity: [0, 1],
  duration: 1200,
  easing: 'steps(6)',
  loop: true
});

Элемент .circle появляется и исчезает резкими шагами, создавая эффект мигания.

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

let tl = anime.timeline({ loop: true });

tl.add({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  easing: 'linear'
})
.add({
  targets: '.box',
  translateY: 200,
  duration: 1000,
  easing: 'steps(4)'
});

Первый сегмент перемещает элемент плавно по X, второй — дискретно по Y.

Настройка шага в зависимости от частоты кадров

Количество шагов в steps-анимации часто привязывается к частоте кадров:

  • Для имитации 24 fps на анимацию 1 секунду: steps(24).
  • Для 8 кадров на 1 секунду: steps(8).

Такой подход позволяет точно воспроизвести кадровую анимацию, характерную для классических мультфильмов и игр.

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

  • Для спрайтов: использовать шаги равные количеству кадров спрайта.
  • Для миганий: использовать небольшое количество шагов (2–6), чтобы создавался эффект дискретного включения/выключения.
  • Для интерфейсов: steps можно использовать для «пошаговых» прогресс-баров или переключения состояний без плавного перехода.
  • Совместимость: steps корректно работает с timeline, loop, direction: 'alternate'.

Секреты эффективного применения

  1. Совмещение с translate и backgroundPosition позволяет создавать плавные, но дискретные движения, идеально для платформенных игр.
  2. Использование параметра direction (start/end) влияет на визуальное восприятие: начало шага или конец шага создают разные эффекты динамики.
  3. Контроль количества шагов позволяет легко синхронизировать анимацию с музыкой или таймлайном кадров.
  4. Loop и autoplay делают steps-анимацию универсальным инструментом для бесконечных циклов, например, анимаций загрузки или интерфейсных индикаторов.
Оглавление