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

簡介

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...

使用步驟

1. 安裝並解壓bodymovin
2. 打開AE，添加bodymovin擴展
3. 導出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