Анимация Lottie в Gridsome на Vue

Всем салют!
Сегодня расскажу, как подключать анимацию, созданную в Adobe After Effect в свой проект, создавая при этом интересные и интерактивные элементы страниц.

Большинство сайтов я разрабатываю используя генератор статики Gridsome, который написан на VueJS. А это значит, что данный туториал идеально подойдет для включения Lottie анимации в данный фреймворк.

Входные данные:

  • Gridsome версии 7.0.10
  • Lottie анимация в формате .json (советую посмотреть анимированные элементы здесь).

Включение анимации

Устанавливаем пакет vue-lottie в наш проект. На момент написания данной заметки, версия 0.2.1.

yarn add vue-lottie -D

Создадим директории. Здесь будем хранить наш компонент с анимацией и чуть ниже файл .json.

mkdir src/components/lottie && mkdir src/components/lottie/json

Далее компонент, в котором будет происходить все манипуляции с анимацией.

<template> <div class="w-full"> <lottie :options="defaultOptions" :height="400" :width="auto" v-on:animCreated="handleAnimation"/> <div> <p>Speed: x{{animationSpeed}}</p> <input type="range" value="1" min="0" max="3" step="0.5" v-on:change="onSpeedChange" v-model="animationSpeed"> </div> <button v-on:click="stop">stop</button> <button v-on:click="pause">pause</button> <button v-on:click="play">play</button> </div> </template> <script> import Lottie from 'vue-lottie' import Cat404 from '@/components/lottie/json/Cat404.json' export default { components: { 'lottie': Lottie }, data() { return { defaultOptions: { animationData: Cat404 }, animationSpeed: 1 } }, methods: { handleAnimation: function (anim) { this.anim = anim; }, stop: function () { this.anim.stop(); }, play: function () { this.anim.play(); }, pause: function () { this.anim.pause(); }, onSpeedChange: function () { this.anim.setSpeed(this.animationSpeed); } } } </script>

..