动画|lottie

什么是lottie

lottie-web

官网
可以在json

教程

import lottie from 'lottie-web';
import lottieData from '../../assets/goodjob.json';
data() {
    return {
      lottieAnimation: null,
  }
}
this.lottieLoading();
lottieLoading() {
  // const lottieDom = document.createElement('div');
  // lottieDom.setAttribute("id", "lottie-goodjob");
  let lottieDom = document.getElementById("lottie-goodjob");
  this.lottieAnimation = lottie.loadAnimation({
    container: lottieDom,
    renderer: 'svg',
    loop: false,
    autoplay: true,
    name: 'loading',
    animationData: lottieData,
  });
  this.lottieAnimation.addEventListener('complete', () => {
    this.lottieAnimation.destroy();
    // lottieDom.remove();
  });
},

结合Lottie-web源码的深入分析

https://juejin.cn/post/7000273590830514212#heading-12

lottie系列文章

支付宝-翻牌领现金

飞书中 Lottie 动画的应用