Anime.js — это легкая библиотека анимации на основе JavaScript. Вы можете использовать его для анимации различных свойств CSS, атрибутов SVG или DOM на веб-странице. Библиотека позволяет управлять всеми аспектами анимации и предоставляет множество способов указать элементы, на которые вы хотите нацелить, или свойства, которые вы хотите анимировать.
Вы полностью контролируете последовательность воспроизведения анимации или синхронизацию анимаций разных элементов по отношению друг к другу. Библиотека поддерживает все современные браузеры, включая IE10 +.
В этой серии руководств вы узнаете обо всех возможностях Anime.js, чтобы с легкостью использовать их в реальных проектах.
Прежде чем углубляться в тему, давайте сначала установим библиотеку. Вы можете использовать npm или bower для выполнения установки, выполнив следующие команды:
|
1
2
3
|
npm install animejs
bower install animejs
|
Вы также можете скачать библиотеку и включить ее в свой проект или напрямую связать с последней версией библиотеки, размещенной на CDN .
|
1
|
<script src=»path/to/anime.min.js»></script>
|
После успешной установки вы готовы использовать эту библиотеку для добавления интересной анимации к вашим элементам. Мы начнем с основ библиотеки, сосредоточив внимание на одной конкретной области за раз.
Указание целевых элементов
Чтобы создать анимацию с использованием Anime.js, вам нужно вызвать функцию anime() и передать ей объект с парами ключ-значение, которые, помимо прочего, указывают целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключ targets чтобы сообщить Anime.js, какие элементы вы хотите анимировать. Этот ключ может принимать значения в разных форматах.
Селекторы CSS : Вы можете передать один или несколько селекторов CSS в качестве значения для targets ключа.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
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 классом. Во втором случае Anime.js будет анимировать все элементы с red или blue классом. В третьем случае Anime.js оживит всех четных детей с square классом. В последнем случае Anime.js будет анимировать все элементы square классом, у которого нет red класса.
Узел DOM или NodeList : Вы также можете использовать узел DOM или NodeList в качестве значения для ключа targets . Вот несколько примеров установки targets в качестве узла DOM.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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() используется для получения первого элемента, который имеет синий класс. Функция querySelectorAll() используется для получения всех элементов в документе, которые соответствуют указанной группе селекторов.
Существует также множество других функций, которые вы можете использовать для выбора целевых элементов, которые вы хотите анимировать. Например, вы можете получить все элементы с данным именем класса, используя getElementsByClassName() . Аналогично, вы также можете получить все элементы с данным именем тега, используя getElementsByTagName() .
Любая функция, которая возвращает узел DOM или NodeList, может использоваться для установки значения ключа targets в Anime.js.
Object : Вы также можете использовать объект JavaScript в качестве значения для ключа targets . Ключ этого объекта используется в качестве идентификатора, а значение используется в качестве числа, которое необходимо анимировать.
Затем вы можете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript. Вот код для анимации значений двух разных ключей объекта.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
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 до 1000, а количество зараженных файлов — от 0 до 8. Помните, что таким способом можно анимировать только числовые значения. Попытка анимировать ключ от «AAA» до «BOY» приведет к ошибке.
Мы также использовали функцию обратного вызова для ключа update который вызывается в каждом кадре во время работы анимации. Мы использовали его здесь, чтобы обновить количество проверенных и зараженных файлов. Однако вы можете пойти дальше и показать пользователям сообщение об ошибке, когда количество зараженных файлов превышает определенный порог.
Массив : возможность указать массив JavaScript в качестве цели очень полезна, когда нужно анимировать группу элементов, которые попадают в разные категории. Например, если вы хотите анимировать узел DOM, объект и кучу других элементов на основе селекторов CSS, вы можете сделать это легко, поместив их все в массив, а затем указав этот массив в качестве значения для ключа targets , Следующий пример должен прояснить ситуацию:
|
1
2
3
4
|
var multipleAnimations = anime({
targets: [document.querySelectorAll(‘.blue’), ‘.red, #special’],
translateY: 250
});
|
Свойства, которые можно анимировать в Anime.js
Теперь, когда вы знаете, как указать различные элементы, которые вы хотите анимировать, пришло время узнать обо всех свойствах и атрибутах, которые можно анимировать с помощью библиотеки.
Свойства CSS : Anime.js позволяет анимировать множество свойств CSS, таких как ширина, высота и цвет, для различных целевых элементов. Окончательные значения различных анимируемых свойств, таких как background-color и border-width, указываются с использованием версии этого свойства в случае верблюда. Следовательно, background-color становится backgroundColor , а border-width становится borderWidth . В следующем фрагменте кода показано, как анимировать левую позицию и цвет фона целевого элемента в Anime.js.
|
1
2
3
4
5
6
7
8
9
|
var animateLeft = anime({
targets: ‘.square’,
left: ‘50%’
});
var animateBackground = anime({
targets: ‘.square’,
backgroundColor: ‘#f96’
});
|
Свойства могут принимать все виды значений, которые они приняли бы при использовании в обычном CSS. Например, left свойство может быть установлено на 50vh , 500px или 25em . Вы также можете указать значение как пустое число. В этом случае число будет преобразовано в значение в пикселях. Точно так же цвет фона может быть указан как шестнадцатеричное, RGB или HSL значение цвета.
CSS-преобразования : вы также можете анимировать различные CSS-преобразования, используя Anime.js. Перевод по осям x и y может быть достигнут с использованием свойств translateX и translateY . Аналогично, можно масштабировать, наклонять или вращать элемент вдоль определенной оси, используя свойство scale , skew и rotate соответствующее этой конкретной оси.
Вы можете указать разные углы в терминах или градусах или в turn . Значение 1 поворота равно 360 °. Это может облегчить вычисление, когда вы знаете, на сколько вы хотите повернуть элементы с точки зрения полных поворотов. В следующем примере показано, как анимировать масштабирование, перемещение или вращение элемента на индивидуальной основе, а также все сразу.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
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’
});
|
Атрибуты SVG . Можно анимировать атрибуты различных элементов SVG с помощью Anime.js. Единственным условием является то, что значение этих атрибутов должно быть числовым. Эта способность анимировать различные атрибуты открывает возможность создания действительно крутых эффектов. Поскольку вы только начинаете изучать Anime.js, примеры из этого учебного курса будут очень простыми.
По мере продвижения вперед вы узнаете, как создавать более сложные анимации. Вот код для анимации атрибутов круга cx , cy и stroke-width . Точно так же, как свойства CSS, вам нужно использовать версионную версию stroke-width для работы кода.
|
1
2
3
4
5
6
7
8
9
|
var animateX = anime({
targets: ‘.circle’,
cx: window.innerWidth*0.6
});
var animateStrokeWidth = anime({
targets: ‘.circle’,
strokeWidth: ’25’
});
|
Атрибуты DOM : Вы также можете анимировать числовые атрибуты DOM так же, как вы анимировали атрибуты SVG. Одной из ситуаций, когда анимация атрибута DOM может быть полезна, является элемент прогресса HTML5 . Этот элемент имеет два атрибута, value и max . В нашем примере мы будем анимировать атрибут value, чтобы показать ход нашего процесса передачи файлов. Вот код для анимации value атрибута.
|
1
2
3
4
5
|
var animateProgress = anime({
targets: ‘progress’,
value: 100,
easing: ‘linear’
});
|
Последние мысли
В этом руководстве вы узнали обо всех способах выбора целевых элементов в Anime.js и о том, как анимировать различные свойства CSS и связанные с ними атрибуты. На данный момент мы не контролируем ничего, связанного с реальной анимацией.
JavaScript, возможно, является языком Интернета. Конечно, не без его кривых обучения, и, как вы можете сказать, есть множество фреймворков и библиотек, которые могут занять вас. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
В следующем уроке из этой серии вы узнаете, как управлять замедлением, задержкой и продолжительностью анимации для различных свойств как в группе, так и индивидуально. Затем вы узнаете, как управлять всеми этими параметрами анимации для отдельных элементов.
Если есть какие-либо вопросы, связанные с этим руководством, или вы использовали Anime.js в каких-либо интересных проектах, пожалуйста, сообщите нам об этом в комментариях.