目前这个技术是airbnb的动画技术,提供的是JSON的文件格式,目前来看能实现比较复杂的动画,并且性能还不错,在机顶盒上兼容正常,同样也可以在IOS和安卓上使用。
官网在此:https://airbnb.design/lottie/
github:https://github.com/airbnb/lottie-web
使用步骤:
1.引入bodymovin包,npm、bower就不说了,机顶盒不支持npm,所以直接script引入,CDN地址为:https://cdnjs.com/libraries/bodymovin,如果嫌慢,也可以自己down下来放到自己的项目里或者服务器上
2.引入动画JSON文件,这个可以找设计师提供,暂且名字为data.json,json格式如下
3.调用方法生成动画
let animation1=lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,//循环播放
autoplay: true,//自动播放
path:'./data.json'// the path to the animation json' ,相对路径
// or
// animationData: animationData 或者直接引入json
});
大功告成了
如果需要停止,恢复动画播放,官方也提供了API:
停止动画:
animation1.stop();
恢复动画:
animation1.play();