Анимация в JS. Статья вторая.

Параметры

delay - определяет промежуток времени от момента запуска анимации до ее начала (измеряется в миллисекундах 1000 миллисекунд = 1 секунда)

duration - определяет время выполнения анимации (измеряется в миллисекундах 1000 миллисекунд = 1 секунда)

easing - определяет скорость воспроизведения. Она может меняться в процессе выполнения команды, но анимация всегда будет идти столько, сколько вы указали в параметре duration

elasticity - параметр, управляющий скачками значения назад и вперед

Пример:

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

Функционально-ориентированные параметры

target - сохраняет ссылку на текущей целевой элемент. Параметр target полезен, когда значения анимации нужно установить на основе некоторых атрибутов целевого элемента. Например, вы можете сохранить значения параметров delay, duration или easing для целевого элемента в атрибутах данных, а затем обратиться к ним позже.

index - сохраняет индекс или положение текущего целевого элемента. Параметр передаёт позицию текущего целевого элемента. Его можно использовать для постепенного изменения значения параметров вроде duration и delay для разных элементов.

targetCount - сохраняет общее количество целевых элементов

Параметры анимации

loop - определяет количество воспроизведений анимации.

autoplay - автоматическое воспроизведение анимации. У него может быть 2 состояния : true или false. По умолчанию установлено true

direction -указывает направление воспроизведения анимации.

У него есть три значения:

normal — стандартное значение по умолчанию, которое не изменяет направление анимации. Если значение loop больше 1, то целевые элементы будут возвращаться моментально к своим исходным позициям и анимация будет воспроизводиться с самого начала.
reverse — при значении loop больше 1 анимация проигрывается в обратном порядке, то есть от конечной точки к начальной. После этого элементы моментально перемещаются на исходные позиции и всё начинается заново.
alternative — значение параметра, при котором анимация изменяет направление после каждого цикла.

Итого

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