html如何加载ae做好的,AE转JS动画，lottie.js和bodymovin的简易使用心得

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);

}

}