Lottie动画的使用

1、下载lottie npm i lottie-web (www.npmjs.com/package/lot…)

2、引入lottie import Lottie from 'lottie-web'

3、导入设计给的Json动画 文件注意：一般要将设计给到的json文件改成js文件，就可以导出了，图片动态引入要用require('@src/assets/imamge/test.png'),有条件的可以让设计导出有图的json文件，这样开发就用考虑路径问题) import donghua from '' (json路径)

4、挂在lottie

{

Lottie.loadAnimation({
    container: this.$refs.lottieElement as never  // 把lottie挂在那个元素上
    renderer: 'svg',
    loop: true,
    autoplay: false,
    animationData: donghua
})

}

5、在HTML上使用

{

<div class="lottie" ref="lottieElement"></div>

}

6、注意：lottie内部用到了eval去动态执行语句了，如果项目架构中去掉了eval动画是执行不了的。