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给的动画文件都有什么
这个文件中,需要将images文件拷贝到public文件夹下面(例如,public/demo/images),然后修改data.json里面的内容,将data.json里面图片的路径修改成/demo/images