h5读取data.json渲染在页面完成动画

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可以去官网了解