AE動畫轉Web程式碼工具指北-Lottie

摘要： 簡介 Lottie 是 Airbnb 開源的一套跨平臺 的完整的動畫效果解決方案 ，設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後，使用 Lottic 提供的 Bodymovin 外掛將設計好的動畫匯出成 JSON 格式，就可以直接運用在 i...

簡介

Lottie 是 Airbnb 開源的一套跨平臺 的完整的動畫效果解決方案 ，設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後，使用 Lottic 提供的 Bodymovin 外掛將設計好的動畫匯出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。

簡單來說，Lottie就是一個可以將AE動畫轉成可執行在IOS、Android、Web、React Native上的AE外掛。

使用

工具

使用前請確保已安裝這以下工具。

• 外掛：bodymovin.zxp
• 解壓：ZXP Installer

其他。

• Lottie預覽：https://www.lottiefiles.com/p...
• web bodymovin cdn:https://cdnjs.com/libraries/b...

使用步驟

bodymovin
bodymovin
data.json

詳細可參考：炫酷神器，AE外掛Bodymovin.zxp的安裝與使用

API

由bodymovin 匯出的data.json 實際就是動畫的資料檔案，我們引入的bodymovin.js 庫會對其做相應的解析。接下來我們只需要新增簡單的初始化程式碼就可以在執行程式碼看到相應的動畫效果了。

以下是最常用的api

1. 初始化

let animation = bodymovin.loadAnimation({
animationData, // [必須] data.json檔案
path, // data.json檔案路徑(animationData/path選其一傳入即可)
container，// [必須] 父容器
renderer, // [必須] 渲染方式
loop,
autoplay
})

2. 暫停/停止/播放

bodymovin.play()
bodymovin.pause()
bodymovin.stop() // 回到第0幀

3. 跳轉之某幀並播放

animation.gotoAndStop(time)
OR animation.gotoAndStop(frame)
----
animation.gotoAndPlay(time)
OR animation.gotoAndPlay(frame)

4. 設定fp

animation.setSubframe()
// true: 使用本地環境的fps [預設]
// false: 使用ae原本的fps

5. 事件監聽

animation.onComplete = function () {} // 動畫結束
animation.onLoopComplete = function () {} // 當前迴圈結束
// 使用addEventListener方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})

一般來說以上的api 即可滿足大部分的動畫展示需求了。更詳細內容可參考官網 ～

Bodymovin庫

最後再分專案框架提供兩個bodymovin 的庫

• react：react-bodymovin
• vue：vue-lottie