http://airbnb.io/lottie/#/web
lottie-web一个适用于web，android，ios，react native和windows 的移动库，
它可以使用bodymovin解析以json 格式导出的adobe after effects动画，并在移动设备上进行本地渲染.
通过一个叫 bodymovin 的开源 after effects 插件，以 json 文件的形式进行输出，lottie 通过 json 格式下载动画数据并实时提供给开发者。
① bodymovin插件下载安装
② 安装并解压bodymovin
③ 打开ae，添加bodymovin扩展
④ 导出data.json文件，动画的数据文件 详细可参考：炫酷神器，ae插件bodymovin.zxp的安装与使用
⑤ api
暂停/停止/播放：
跳转之某帧并播放：
设置fp：
事件监听：
lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用lottie方案的好处在于：
① 动画由设计使用专业的动画制作工具adobe after effects来实现，使动画实现更加方便，动画效果也更好；
② 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
③ 设计制作动画，前端展现动画，专业人做专业事，分工合理；
④ 卖家秀即买家秀，还原程度百分之百；
⑤ 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。
① lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前h5项目有离线包，pc项目也会上pwa，会对其进行缓存，保证加载速度。
② lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
③ 动画json文件的导出，目前是将ae里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
④ 有很少量的ae动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。
一个小的练习
js
html
css
然后就是要和ui那边商讨吧这样的设计和动画，是不是进阶了呢 加油呀