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

}

}

總結

以上是生活随笔為你收集整理的html如何加载ae做好的,AE转JS动画，lottie.js和bodymovin的简易使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。