vue-lottie loads json animation

Why use it

For some design styles of the current page, in order to achieve a certain visual effect, there will inevitably be some dynamic effects. Generally, the first thing that comes to mind is animation, gif or apng. However, the more frames the dynamic picture, the larger the picture, the slower it will load.
So there is a form of exporting animation data to json to load it into the page. Many advantages

1. The file is very small, usually loaded into the page in json, and it loads faster
 2. You can move forward, backward, whether to play animations in a loop, etc. The most important thing is that you can program the animations to respond to some interactions of manual operations.
 3. Good support, currently supports entities, shape layers, masks, alpha masks, clipping paths and dotted lines, and the effect will be better.

• 1
• 2
• 3

AI writing code

How to use it

1. Installation

npm install --save vue-lottie

• 1

AI writing code

2. Quotation

import lottie from 'vue-lottie';
('lottie', lottie)

• 1
• 2

AI writing code

3.Introduce animation json

const animationData = require('@/assets/animate/')

• 1

AI writing code

4. Introduce the lottie plugin

<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" /> 

• 1

AI writing code

5. Add properties and methods

//Add defaultOptions attribute into it, the parameter is animationData, which is animation resource json
 data(){
     return {
         defaultOptions: { animationData: animationData,loop:true,},
         animObj: {} //Animation object, forward, backward and other operations can be performed
     }
 }
 //Add the callback handleAnimation method after creation
 methods: {
     handleAnimation: function(animate) {
         = animate;
         (animate); // You can see all properties of the lottie object here
     },
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

AI writing code

The above operations can load animation effects on the page
There are two small pits that I have stepped on, so let me mention them here

1. When introducing json, require is used instead of import. If import is introduced, json animation cannot be displayed.
	 For the specific reasons, please check the difference between import and require
 2. The image address in the json object is for the server project directory.
	 The default is the images directory, which can be modified. The image directory needs to be placed in the project root directory.

• 1
• 2
• 3
• 4

AI writing code

vue-lottie specific instructions can be foundgitaddress/chenqingspring/vue-lottie