PS：描述不清或者描述错误请见谅...
AE动画转换JS动画使用了lottie.js库
制作流程：
1、设计师使用PS或者AI制作静态设计稿；
2、设计师对设计稿图层进行分类
3、导入AE制作
4、AE导出文件，对应使用的AE插件为bodymovin
5、前端开发 接收设计师发来的文件，提取相关代码，写入需要使用的页面。
前端的工作：
1、设计师发来的文件里，通常包含data.js和demo.html，如果bodymovin导出时没有勾选图片转换为base64的话会多出一个images文件夹存放图片文件，注意，在新版本的bodymovin 里导出的是data.json和demo.html，前端工作量会小一点。
2、样式方面：
#lottie{
width: 100px;
height: 100px;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
}
需要为动画设置一个容器，定义宽高，transform为强制开启GPU渲染，容器设置ID
3、引入库文件
4、提取动画数据
(1)data.js 和 demo.html 存在的情况下：
let animationData = {......};
let params = {
container: document.getElementById("lottie"),
renderer: "canvas",
loop: true,
autoplay: true,
animationData: animationData
}
let anim = lottie.loadAnimation(params);
(2)data.json 和 demo.html 存在的情况下：
let animationData = {......};
let params = {
container: document.getElementById("lottie"),
renderer: "canvas",
loop: true,
autoplay: true,
path: "data.json"
}
let anim = lottie.loadAnimation(params);
data.json存在时不需要提取animationData !
container：为预留的动画容器；
renderer：为动画模式，html为纯dom结构动画，canvas为画板动画，svg为svg动画；
loop：为循环
autoplay：为自动播放
animationData：为动画数据，该内容与data.js内容一致，所以data.js 可以不使用；
path：为动画数据，与animationData不可同时使用，数值为data.json的路径
常用方法：
输出动画时长秒：
console.log("时长(s):" + anim.getDuration(false));
输出动画时长帧：
console.log("时长(帧):" + anim.getDuration(true));
暂停：
anim.pause();
播放：
anim.play();
停止：
anim.stop();
销毁动画实例:
anim.destroy();
正/反向播放:
anim.setDirection(parm);
parm: 1为正向，-1为反向
播放速度：
anim.setSpeed(num);
例子，用同一个按钮切换播放/停止的方法：
document.getElementById("btn").onclick = function(){
if(anim){
anim.destroy();
anim = undefined;
}
else{
anim = lottie.loadAnimation(params);
}
}
