Анимации На Основе JavaScript С Использованием Anime.js, Часть 2: Параметры

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

Иногда может потребоваться более ритмичная анимация элементов. Например, у вас может быть десять различных элементов, которые вы хотите переместить слева направо с задержкой в 500 мс между началом анимации для каждого элемента. Аналогичным образом можно увеличить или уменьшить длительность анимации для каждого элемента в зависимости от его положения.

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

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

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

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

Вы можете использовать параметр 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 секунды. Теперь она будет работать в течение 1200 миллисекунд или 1,2 секунды.

Одним из основных ограничений параметров свойств в приведенном выше примере было то, что все анимации целевого элемента будут иметь одинаковые значения 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 мс, в то время как анимация вращения и трансляции использует значение глобальной продолжительности 1500 мс.

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

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

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

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

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

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

Параметр 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. Его значение по умолчанию - true, но вы можете остановить анимацию от запуска самостоятельно, установив ее в значение false.

Параметр direction определяет направление воспроизведения анимации. Он может иметь три значения: normal, reverse и alternate. Значение по умолчанию равно normal, что обеспечивает нормальное воспроизведение анимации с начальных значений до конечных значений. Когда целевые элементы достигнут финишного значения, если значение loop больше 1, целевые элементы возвращаются к начальным значениям, а затем снова начинают анимацию.

Когда для параметра direction установлено значение reverse, а значение loop больше 1, анимация меняет направление. Другими словами, целевые элементы запускают анимацию из своего конечного состояния и идут назад, чтобы достичь начального состояния. Когда они находятся в исходном состоянии, элементы возвращаются в конечное состояние, а затем снова запускают обратную анимацию. Значение направления alternate изменяет направление анимации после каждого цикла.

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

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

Заключительные мысли

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

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

Если у вас есть какие-либо вопросы, связанные с этим учебным курсом, пожалуйста, напишите мне об этом в комментариях.