Анимация Lottie в Gridsome на Vue • Dev notes

Всем салют!
Сегодня расскажу, как подключать анимацию, созданную в 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>