资源
http://airbnb.io/lottie/#/web lottie 官网
动画的实现逻辑借用官网的一句话
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
优势
简单快捷的 为前端添加炫酷动画效果
且，动画更精致 （完全由设计去制作，专业的事专业的人去做 ，关于AE的要使用的插件 http://airbnb.io/lottie/#/after-effects）
且，在web端兼容性好
且，相对于 gif 等，体积更小，更好的适应拉伸，和高分辨率屏幕
使用
npm install lottie-web
import lottie from 'lottie-web'
let amt = 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
});
amt .play() // 运行动画
amt.addEventListener('complete', _=>{})
官网关于 动画 的参数
http://airbnb.io/lottie/#/web?id=usage
官网关于 动画 的方法
http://airbnb.io/lottie/#/web?id=usage-1
官网关于 动画 的事件
http://airbnb.io/lottie/#/web?id=events
有了以上官网文档的支持，动画组件的使用易如反掌