Всем салют!
Сегодня расскажу, как подключать анимацию, созданную в Adobe After Effect в свой проект, создавая при этом интересные и интерактивные элементы страниц.
Большинство сайтов я разрабатываю используя генератор статики Gridsome, который написан на VueJS. А это значит, что данный туториал идеально подойдет для включения Lottie анимации в данный фреймворк.
Входные данные:
Устанавливаем пакет 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>
..