1、使用lottie来完成动画的渲染
2、在lottie官网下载lottie.min.js,通过script引入在页面中
3、创建一个容器渲染动画
<div class="lottie1" id="lottie1"></div>
4、在js设置对应的参数
var animation1 = bodymovin.loadAnimation({
container: document.getElementById('lottie1'), //获取容器的id
path: './images/tiger/data.json', // 这个是data.json的文件目录
renderer: 'canvas', // 选择的渲染方式
loop: true, //是否循环播放
autoplay: false //是否自动播放(fase不自动播放,true自动播放)
})
animation1.addEventListener('complete', () => {
//监听动画是否播放完毕
});
详细的api可以去官网了解