How to use json animation

1. Install npm install lottie-web -s

2. Introduce   

import lottie from "lottie-web"; // Import plugin

import animationData from "@/assets/data.json"; // Import json data

3. Use   

html  <view class="lottie"></view>

js    

   optAnimation() {
      lottie.destroy();
      this.$nextTick(() => {
        let elem = document.querySelector(".lottie")
        let params = {
          container: elem,
          renderer: "svg",
          loop: true,
          autoplay: true,
          animationData: animationData,
        };
        lottie.loadAnimation(params);
      });
    },

4. Problems encountered

The pictures in the json animation are not displayed, how to solve it 1. Use network pictures 2. Convert pictures to base64

Guess you like

Origin blog.csdn.net/WDCCSDN/article/details/112897566