Add beautiful Lottie animations to vue (^_^)

Why Lottie ★~★

1. It takes the monotony out of your program

2. It can make some students with aesthetic obsession feel better

There are plenty of resources on the InternetClick on me to access Lottie Resources

Introducing Lottie libraries (>. <)

Introducing Lottie into VUE is very, very simple

1. Install the VUE-Lottie package

npm install --save vue-lottie
Copy the code

2. Globally introduce vue-Lottie

Import and register the global component in main.js

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
Copy the code

Of course, you can also locally introduce ~o~

3. Bring in your Lottie resources

The Lottie resources website at the top of the article can download the corresponding resources and save the downloaded files to the project folder

Import * as animationData from script".. /assets/lottie/loading.json";
Copy the code

// Step 2: Use the component < Lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
Copy the code

// Step 3: Add attributes to datadata() {return {
        defaultOptions: { animationData: animationData },
        animationSpeed: 1,
        anim: {}
    }
}
Copy the code

HandleAnimation () {handleAnimation:function(anim) { this.anim = anim; console.log(anim); // Here you can see all the properties of the Lottie object},}Copy the code

We’re done here QAQ

There are some stop,pause,setSpeed API methods that I won’t go into

Finally, paste the vue-Lottie author’s Github address

vue-lottie