大屏动画效果-----Lottie

ui：突然给前端扔了一个文件，说是大屏的动画效果
  菜鸟（前端）：？？？，这动画文件怎么弄？？
  下面来办理这个题目
这种方式，是需要使用一个插件Lottie
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo


安装

1. npm i lottie-web

复制代码

使用

1. import lottie from 'lottie-web'
2. import ammNoticeData from '@/assets/demo/data.json'
4. mounted() {
5.     this.initLottieAnimation()
6.   },
7. methods:{
8.     initLottieAnimation(){
9.       lottie.loadAnimation({
10.         container: document.getElementById('id'),
11.         animationData: ammNoticeData, // 动画 JSON 数据
12.         renderer: 'svg', // 使用 SVG 渲染器
13.         loop: true, // 循环播放
14.         autoplay: true, // 自动播放
15.       });
16.     }
17. }

复制代码

注意：

 看下ui给的动画文件都有什么

这个文件中，需要将images文件拷贝到public文件夹下面（例如，public/demo/images），然后修改data.json里面的内容，将data.json里面图片的路径修改成/demo/images
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。