Anime.js — небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.
Вы полностью контролируете последовательность воспроизведения анимации и управляете синхронизацией анимации разных элементов друг относительно друга. Библиотека поддерживает все современные браузеры, включая IE10 и новее.
В этой серии обучающих статей вы узнаете обо всех функциях Anime.js и сможете применять библиотеку в своих проектах.
Примечание Если вы совсем новичок в JavaScript, предлагаем вам ознакомиться с вводной статьёй по этому языку программирования.
Установка библиотеки
Для установки можно использовать команды npm или bower:
npm install animejs
bower install animejs
Вы также можете загрузить библиотеку и включить в свой проект или ссылаться на её последнюю версию через CDN.
<script src="path/to/anime.min.js"></script>После успешной установки вы сможете использовать Anime.js для добавления интересных анимаций к вашим элементам. Давайте начнём с базовых возможностей библиотеки.
Определение целевых элементов
Для создания анимации с помощью Anime.js нужно вызвать функцию anime() и передать ей объект с парами ключ-значение, которые определяют целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключевое слово targets, чтобы дать библиотеке понять, что вам нужно анимировать. Это ключевое слово может принимать значение в разных форматах.
CSS-селекторы: вы можете передавать один или более селекторов в виде значений для ключевого слова targets.
var blue = anime({
targets: '.blue',
translateY: 200
});
var redBlue = anime({
targets: '.red, .blue',
translateY: 200
});
var even = anime({
targets: '.square:nth-child(even)',
translateY: 200
});
var notRed = anime({
targets: '.square:not(.red)',
translateY: 200
});В первом случае Anime.js будет анимировать все элементы с классом blue. Во втором — blue или red. В третьем случае Anime.js будет анимировать все дочерние чётные элементы с классом square. А в последнем случае библиотека будет взаимодействовать со всеми элементами с классом square, у которых нет класса red.
See the Pen Setting Target as a CSS Selector by Monty (@Shokeen) on CodePen.
DOM-узлы (DOM node) или коллекция узлов (NodeList): вы можете также использовать DOM-узел или NodeList в качестве значения для ключевого слова targets. Посмотрите на пример использования DOM-узла для targets.
var special = anime({
targets: document.getElementById('special'),
translateY: 200
});
var blue = anime({
targets: document.querySelector('.blue'),
translateY: 200
});
var redBlue = anime({
targets: document.querySelectorAll('.red, .blue'),
translateY: 200
});
var even = anime({
targets: document.querySelectorAll('.square:nth-child(even)'),
translateY: 200
});
var notRed = anime({
targets: document.querySelectorAll('.square:not(.red)'),
translateY: 200
});В первом случае использовалась функция getElementById(), чтобы обратиться к определённому элементу. Функция querySelector() использовалась для обращения к элементу с классом blue. А функция querySelectorAll() применялась для обращения ко всем элементам внутри документа, которые соответствуют группе определённых селекторов или же, наоборот, не входят в неё.
Существует множество функций, которые вы также можете использовать для выбора целевого элемента. Например, вы можете обратиться к элементам с определённым классом, используя функцию getElementsByClassName(). Или к элементам с определённым тегом, используя функцию getElementsByTagName().
Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения targets в Anime.js.
See the Pen Setting Target as a DOM Node or Node List by Monty (@Shokeen) on CodePen.
Объект: вы можете использовать объекты JavaScript в качестве значения для targets. Ключ этого объекта используется в качестве идентификатора, а значение — в качестве числа, которое нужно анимировать.
Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.
var filesScanned = { count: 0, infected: 0 };
var scanning = anime({
targets: filesScanned,
count: 1000,
infected: 8,
round: 1,
update: function() {
var scanCount = document.querySelector('.scan-count');
scanCount.innerHTML = filesScanned.count;
var infectedCount = document.querySelector('.infected-count');
infectedCount.innerHTML = filesScanned.infected;
}
});Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из AAA в BOY будет выведено сообщение об ошибке.
Кроме того, в коде использовалась функция обратного вызова ключа update, который вызывается на каждый кадр во время выполнения анимации. Здесь она использовалась для обновления количества сканированных и заражённых файлов. Однако вы можете пойти дальше и показать пользователям сообщение об ошибке, когда количество заражённых файлов превысит определённый порог.
See the Pen Setting Target as an Object by Monty (@Shokeen) on CodePen.
Массив: возможность указывать массив JavaScript в качестве значения targets будет полезна, если вам нужно анимировать множество элементов, которые относятся к разным категориям. Например, если вы хотите анимировать DOM-узел, объект и множество других элементов, основанных на CSS-селекторах, то можно это сделать, поместив их в массив, а затем определить массив в качестве значения для targets. Пример ниже должен прояснить ситуацию.
var multipleAnimations = anime({
targets: [document.querySelectorAll('.blue'), '.red, #special'],
translateY: 250
});See the Pen Setting Target as an Array by Monty (@Shokeen) on CodePen.
Какие свойства можно анимировать с помощью Anime.js
Теперь вы знаете, как определить разные элементы, которые нужно анимировать. Пришло время узнать, какие свойства и атрибуты могут быть анимированы при использовании библиотеки.
Свойства CSS
К таким, например, относятся ширина, высота и цвет для разных целевых элементов. Финальные значения разных анимируемых свойств вроде background-color определяются с использованием lowerCamelCase. Таким образом background-color превращается в backgroundColor. Код ниже иллюстрирует анимацию положения объекта left и цвета фона (backgroundColor) целевого объекта.
var animateLeft = anime({
targets: '.square',
left: '50%'
});
var animateBackground = anime({
targets: '.square',
backgroundColor: '#f96'
});See the Pen Animating CSS Properties in Anime.js by Monty (@Shokeen) on CodePen.
Свойства могут принимать разные виды значений, которые они бы приняли при использовании обычного CSS. Например, свойство left может иметь такие значения: 50vh, 500px или 25em. Вы также можете не указывать единицу измерения после числа, но в таком случае ею станет px по умолчанию. Аналогичные действия можно выполнить с background-color, указав цвет в виде шестнадцатеричного значения или при помощи кода RGB или HSL.
CSS-трансформирование
Преобразование по осям X и Y достигается с помощью свойств translateX и translateY. Аналогичным образом можно масштабировать, наклонять или вращать элемент вдоль определённой оси, используя свойства: scale (масштабирование), skew (наклон) или rotate (поворот), соответствующие этой конкретной оси.
Существует возможность определения разных углов или в градусах, или с помощью свойства turn. Значение turn, равное 1, соответствует 360 градусам. Это позволяет сделать вычисления проще, так как вы знаете, на сколько нужно повернуть элементы относительно своей оси. В примере ниже показано, как происходит анимация масштабирования, перехода или поворота как единичного свойства, так и всех сразу.
var animateScaling = anime({
targets: '.square',
scale: 0.8
});
var animateTranslation = anime({
targets: '.square',
translateX: window.innerWidth*0.8
});
var animateRotation = anime({
targets: '.square',
rotate: '1turn'
});
var animateAll = anime({
targets: '.square',
scale: 0.8,
translateX: window.innerWidth*0.8,
rotate: '1turn'
});See the Pen Animating CSS Transforms in Anime.js by Monty (@Shokeen) on CodePen.
Атрибуты SVG
Единственное условие заключается в том, что значение атрибутов должно быть числовым. Способность анимировать разные атрибуты открывает возможности для создания некоторых классных эффектов. Поскольку эта статья ознакомительная, в ней будут приведены простые примеры.
По мере углубления в библиотеку вы будете узнавать, как создаются более сложные анимации. Ниже представлен код для анимации атрибутов круга cy, cx и stroke-width. Как и с другими свойствами CSS, для stroke-width надо использовать CamelCase, чтобы код работал корректно.
var animateX = anime({
targets: '.circle',
cx: window.innerWidth*0.6
});
var animateStrokeWidth = anime({
targets: '.circle',
strokeWidth: '25'
});See the Pen Animating SVG Attributes in Anime.js by Monty (@Shokeen) on CodePen.
Атрибуты DOM
Можно анимировать числовые атрибуты DOM, подобно тому, как вы анимировали атрибуты SVG. Это может быть полезным для работы с элементом progress в HTML5. У него есть два атрибута: value и max. В примере ниже будет выполняться анимация атрибута value, чтобы продемонстрировать прогресс перемещения файла на жёсткий диск.
var animateProgress = anime({
targets: 'progress',
value: 100,
easing: 'linear'
});See the Pen Animating DOM Attributes in Anime.js by Monty (@Shokeen) on CodePen.
Заключение
Вы познакомились со всеми вариантами выбора элементов в Anime.js, а также узнали, как анимировать разные свойства CSS и атрибуты, связанные с ними.
В следующей статье вы узнаете, как контролировать плавность, задержку и длительность анимации как для единичных свойств, так и для группы. Затем вы научитесь контролировать все эти параметры для каждого отдельного элемента.
Перевод статьи «JavaScript-Based Animations Using Anime.js, Part 1: Targets and Properties»
