大屏动画效果-----Lottie
ui：突然给前端扔了一个文件，说是大屏的动画效果菜鸟（前端）：？？？，这动画文件怎么弄？？
下面来办理这个题目
这种方式，是需要使用一个插件Lottie
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
安装
npm i lottie-web 使用
import lottie from 'lottie-web'
import ammNoticeData from '@/assets/demo/data.json'
mounted() {
this.initLottieAnimation()
},
methods:{
initLottieAnimation(){
lottie.loadAnimation({
container: document.getElementById('id'),
animationData: ammNoticeData, // 动画 JSON 数据
renderer: 'svg', // 使用 SVG 渲染器
loop: true, // 循环播放
autoplay: true, // 自动播放
});
}
} 注意：
看下ui给的动画文件都有什么
https://i-blog.csdnimg.cn/direct/59436352358c4f5ba41ed612028fdfda.png
这个文件中，需要将images文件拷贝到public文件夹下面（例如，public/demo/images），然后修改data.json里面的内容，将data.json里面图片的路径修改成/demo/images
https://i-blog.csdnimg.cn/direct/8184c365dc3b4c2290f55748a14f6cab.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]