Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现,最低支持 API 16;
实现方式如下。
1、创建dom
<div id="lottieBackground"></div>
2、页面引入json文件和lottie
import lottie from 'lottie-web'
import backgroundImg from '@/assets/lottie/data2.json'
3、初始化
data() {
return {
lottieBackground: ''
}
},
mounted() {
this.initLottie();
},
4、启用动态效果
methods: {
initLottie() {
this.lottieBackground = lottie.loadAnimation({
container: document.getElementById('lottieBackground'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: backgroundImg
})
}
}