vue3.2 lottie-web animation + introduce json animation

In fact, the method of using this plug-in is very simple, but why do I talk about it? First, it is to record the overall usage process by myself, because it is not very common, so as not to forget it later. Second, I want to record the interaction with the ui and how to change the json; third, it is to help Xiaobai

1. Basic usage

1. Download

npm install lottie-web

2. Import into the page

import lottie from "lottie-web"
import animationData from '@/assets/animations/data.json' //这个json动画文件是UI给的

let animation
const init = () => {
    
    
  animation = lottie.loadAnimation({
    
    
    container: document.getElementById("lottie"),
    renderer: "svg",
    loop: true,   //循环播放 true/number/false
    autoplay: true,
    animationData
  });
}

//template部分
<div id="lottie"></div>

In lottie, you can control the animation stop and other methods, you can read the document, here is an example

 animation.play()  //播放
 animation.pause() //暂停

2. Introduce json animation

If the motion picture given by ui is not complicated, then congratulations, you can just import it directly. But often, the effect we need to achieve is not so simple, so at this moment we need to manually modify the data.json file given by ui.

1. Check if there are any pictures in the compressed package given by ui, if so, convert the pictures to base64 format

2. The converted image corresponds to replace the key value of the corresponding image p in json, and then remember to delete the key value pair of u

It's over~ If it's useful to you, give it a thumbs up