Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2

Отредактировано

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

9К открытий9К показов

В первой части серии обучающих статей по работе с Anime.js вы узнали о разных методах определения целевых элементов, а также о типах CSS-свойств и DOM-атрибутах, которые могут быть анимированы. Сами анимации в предыдущей статье были очень примитивными — целевые элементы двигались на определённое расстояние или изменяли свою степень округления на фиксированной скорости.

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

С какими параметрами вы познакомитесь в этой статье:

duration;
delay;
easing;
elasticity;
target;
index;
targetCount;
loop;
autoplay;
direction.

Параметры свойств

Эти параметры позволяют контролировать длительность, задержку и плавность как единичных свойств, так и целой группы сразу. Параметры duration и delay задаются в миллисекундах. Значение по умолчанию для длительности равно 1 000 миллисекундам, что равно 1 секунде. Любая анимация, применённая к элементу, будет по умолчанию воспроизводиться в течение одной секунды. Параметр delay определяет промежуток времени, который должен пройти от момента запуска анимации до её начала. По умолчанию значение параметра равно нулю — элемент будет анимирован сразу после запуска анимации.

Для контроля скорости воспроизведения анимации используйте параметр easing. Некоторые анимации начинаются медленно, ускоряются к середине, а к концу снова замедляются. Другие начинают воспроизводиться на большой скорости, а ближе к концу замедляются. Однако во всех случаях анимация всегда выполняется в течение того времени, которое вы определили в параметре duration. Anime.js обладает большим количеством функций плавности, которые можно применить к элементам напрямую, используя их имена. Чтобы управлять скачками значения назад и вперёд, установите параметр elasticity с пользовательским значением.

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

			var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});
 
var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});
 
var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Используйте параметры свойств либо независимо от других, либо в комбинациях. Для переменной cubicAnimation применены два параметра: duration и easing. В примере выше длительность анимации равна 1 200 миллисекундам, что равно 1.2 секунды. Если бы она не была обозначена, то длилась бы 1 секунду.

Одно главное ограничение свойств параметров в примере выше заключалось в том, что целевой элемент будет иметь одинаковые значения duration, delay и easing для всех своих свойств.

Например, вместо перехода и изменения степени округления углов элемента одновременно, выполните переход, затем измените степень округления углов. Anime.js позволяет определять разные значения для параметров duration, delay, easing и elasticity. Отрывок кода снизу прояснит ситуацию:

			var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

В коде выше все свойства, которые нужно было анимировать, имеют разные значения. Для цвета фона анимации установлена длительность, равная 400 миллисекундам, в то время как для вращения rotate и для перехода translate использовалось глобальное значение длительности, равное 1 500 миллисекундам.

Для фонового цвета анимации установлен параметр delay, поэтому любое изменение цвета целевого объекта начнётся только после 1 500 миллисекунд (как и было определено в коде). Свойства rotate и translateY используют значения по умолчанию для параметров delay и easing из-за отсутствия каких-либо локальных или глобальных значений для них.

Функционально-ориентированные параметры (Параметры на основе функций)

Основанные на свойствах параметры полезны, когда нужно изменить порядок и длительность анимации для единичных свойств. Однако, те же самые duration и delay будут применены к единичным свойствам всех целевых элементов. Параметры на основе функций позволяют отдельным образом компактно определить duration, delay, elasticity и easing для разных целевых элементов. В этом случае вы устанавливаете значения разных параметров, используя функции вместо чисел. Эти функции принимают три параметра: target, index и targetCount.

target сохраняет ссылку на текущий целевой элемент.
index сохраняет индекс или положение текущего целевого элемента.
targetCount сохраняет общее количество целевых элементов.

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

Подобным образом вы можете обратиться к фоновому цвету целевого элемента, а затем управлять им для окончательной установки цветового значения для единичных элементов. Таким образом можно анимировать все элементы, чтобы установить цвет фона на тот, который на темнее текущего.

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

Обычно это полезно, если вы хотите установить значения в порядке возрастания. Также можно вычесть index из targetCount, чтобы установить значения в порядке убывания. Отрывок кода ниже использует эти параметры для определения значений в порядке возрастания и убывания:

			var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});
 
var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

Код ниже устанавливает разные значения параметра easing для каждого целевого элемента, используя index:

			var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];
 
var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

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

Последний набор параметров позволяет указать, сколько раз должна воспроизводиться анимация, и направление, в котором она должна проигрываться. Чтобы определить количество воспроизведений анимации, используйте параметр loop. Существует параметр autoplay, у которого может быть два состояния: true (установлено по умолчанию) и false. Анимация не будет автоматически запускаться, если поставите значение false.

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

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

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

			var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

Заключение

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

В следующей статье вы узнаете, как анимировать разные значения в виде чисел, функций или ключевых кадров. Также вы узнаете, как работать с временной шкалой и управлять последовательностями анимаций на ней.