Работа с Lottie
Инициализация Lottie
В базовом варианте инициализация Lottie выглядит так:
let animation = lottie.loadAnimation({
container: document.querySelector(el), // DOM элемент, на который будет повешен Lottie
renderer: 'svg', // тип рендера ('svg' / 'canvas')
loop: false, // зацикливание (true / false / number)
autoplay: false, // автовоспроизведение (true / false)
path: 'data.json' // путь до json, сгенерированного с помощью Bodymovin
})
Обратите внимание на опцию renderer. Здесь можно выбрать тип рендера: svg или canvas. Canvas будет более производительным на мобильных устройствах, однако он не поддерживает маски. Поскольку для нашей анимации требуется маска прозрачности, мы воспользуемся svg рендером.
Воспроизведение анимаций: метод playSegments
У Lottie есть множество интересных методов, но одним из самых мощных является метод playSegments(). Он позволяет проигрывать любое количество кадров нашей анимации, начиная и заканчивая любым кадром.
animation.playSegments([start, end], forceFlag)
Давайте рассмотрим его подробнее. Метод имеет два аргумента:
- массив из двух чисел, где 1-ое число - кадр, с которого нужно начать воспроизведение, 2-ое число - кадр, на котором нужно закончить;
- флаг, форсирующий воспроизведение отрезка (лучше всегда указывать true)
Ранее мы выделили 4 ключевых отрезка нашей анимации и спроектировали анимацию так, что каждый отрезок длится ровно одну секунду, и эта секунда соответствует 60-и кадрам. Таким образом, покадрово наша анимация выглядит так:
- появление бактерии - [0, 60]
- бактерия на виду - [60, 120]
- появление спирали - [120, 180]
- исчезновение спирали и бактерии - [180, 240]
Эти отрезки мы можем легко воспроизвести по отдельности с помощью метода playSegments():
animation.playSegments([0, 60], true) // появление бактерии
animation.playSegments([60, 120], true) // бактерия на виду
/* и т.д. */
На демо-странице за это отвечает нижний ряд кнопок в меню. Кнопка "Полностью [0, 240]" запускает анимацию целиком от начала до конца. Следующие 4 кнопки в ряду запускают выделенные нами отрезки анимации. Последняя кнопка запускает произвольный отрезок.
Воспроизведение в обратном направлении
Также мы с легкостью можем воспроизводить отрезки в обратном направлении, просто поменяв местами стартовую и конечную точки:
animation.playSegments([60, 0], true) // бактерия исчезнет
На демо-странице кадры инвертируются после нажатия на кнопку "Реверс" в верхнем ряду.
Изменение скорости: метод setSpeed
Другой полезный метод Lottie - setSpeed(speed). Как понятно из названия, он устанавливает скорость анимации, где speed - это коэффициент скорости (1 - нормальная скорость). Например, следующий код заставит бактерию появиться в 2 раза быстрее:
animation.setSpeed(2)
animation.playSegments([0, 60], true)
На демо-странице этот метод повешен на поле "Скорость".
Управление зацикливанием после инициализации
Зациклить анимацию можно не только при инициализации, но и в любое другое время, вызвав animation.loop = true. См. кнопку "Зацикливание".
Обходим баги IE и Safari: метод setLocationHref
При работе с IE и Safari в режиме svg рендера будет полезен метод setLocationHref(locationHref), который добавляет ко всем url'ам locationHref. Это позволяет обойти некоторые баги этих браузеров (например, такой). Метод не реализован на демо.
// SVG без setLocationHref()
<g mask="url(#maskName)"> ... </g>
// Добавили
animation.setLocationHref(https://example.com)
// SVG стало
<g mask="url(https://example.com#maskName)"> ... </g>
Про остальные методы можно почитать в официальной доке.