Lottie — библиотека позволяющая воспроизводить анимацию сформированную в JSON файле.
Для детального ознакомления перейдите на официальный сайт Lottie.
Подключение анимации из сообщества или из персональной библиотеки Lottie — проблем не вызовет, но если вы задаётесь вопросом, как подключить Lottie локально, то тут не всё очевидно.
Как подключить
Для подключения на страницу нужно пройти через два шага:
1 — Подключить скрипт для воспроизведения
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script>Вариант с локальным подключением скрипта
<script src="./js/lottie.min.js"></script>2 — Подключить файл с заранее подготовленной анимацией
Для этого создайте блок куда будет вставлена ваша анимация — div, где в качестве ID укажите произвольное название (это нужно чтобы потом найти на странице этот блок). Также рекомендую сразу создать класс со стилем для этого блока, к примеру с названием containerAnimation.
<div id="animation-container" class="containerAnimation"></div>Как использовать
Далее нужно написать несколько строк на Java Script.
<script>
var animationContainer = document.getElementById('animation-container');
var animation = bodymovin.loadAnimation({
container: animationContainer,
path: './anim_json/animation.json',
renderer: 'svg',
loop: false,
autoplay: false
});
</script>Расскажу детально, что происходит в этом коде.
Определяем переменную animationContainer к которой привязываем найденый элемент при помощи метода getElementById.
var animationContainer = document.getElementById('animation-container');Далее определяем ещё одну переменную animation (для хранения опций воспроизведения) к которой привязываем функционал подключенной ранее библиотеки.
var animation = bodymovin.loadAnimation({...})Теперь про опции:
- container — опция для связи с контейнером (div), где будет анимация
- path — путь к файлу с анимацией
- renderer — формат для рендеринга анимации
- loop — опция, где можно указать проигрывать по кругу (true) или проигрываеть один раз (false)
- autoplay — автопроигрывание при запуске. true — да, false — нет
Как запустить по HOVER
Для того чтобы при наведении запускалась анимация, следует создать слушатель события, который и будет следить за изменением состояния.
Найти нужный объект
Определяем переменную animationContainer_hover и привязываем к ней наш элемент, за которым хотим следить.
var animationContainer_hover = document.getElementById('animation-container-hover');Курсор над объектом — запускаем анимацию
animationContainer_hover.addEventListener('mouseenter', function() {
animation.play();
});Курсор не на объекте — останавливаем анимацию
animationContainer_hover.addEventListener('mouseleave', function() {
animation.stop();
});Блок полностью
<script>
var animationContainer_hover = document.getElementById('animation-container-hover');
animationContainer_hover.addEventListener('mouseenter', function() {
animation.play();
});
animationContainer_hover.addEventListener('mouseleave', function() {
animation.stop();
});
</script>Демо-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lottie Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script>
<style>
.containerAnimation {
width: 178px;
height: 178px;
}
</style>
</head>
<body>
<div id="animation-container-hover">
<div id="animation-container" class="containerAnimation"></div>
</div>
<script>
var animationContainer = document.getElementById('animation-container');
var animationContainer_hover = document.getElementById('animation-container-hover');
var animation = bodymovin.loadAnimation({
container: animationContainer,
path: './anim_json/animation.json',
renderer: 'svg',
loop: false,
autoplay: false
});
animationContainer_hover.addEventListener('mouseenter', function() {
animation.play();
});
animationContainer_hover.addEventListener('mouseleave', function() {
animation.stop();
});
</script>
</body>
</html>
Anton Lapin