Lottie (網頁版)

在網頁上原生渲染 After Effects 動畫
24,399
作者Lottie 團隊

Lottie 網頁版

Lottie 是一個適用於網頁和 iOS 的行動裝置函式庫，它可以解析使用 Bodymovin 匯出為 JSON 的 Adobe After Effects 動畫，並在行動裝置上以原生方式渲染！

設計師首次能夠建立並發佈精美的動畫，而無需工程師費力地手動重新建立。俗話說一圖勝千言，以下有 13,000 個字。

請至 airbnb.io/lottie 查看文件、常見問題、說明、範例以及更多資訊

Example1

Example2

Example3

Community

Example4

外掛程式安裝

選項 1 (建議)

從 aescripts + aeplugins 下載： http://aescripts.com/bodymovin/

選項 2

或從 Adobe 商店取得： https://creative.adobe.com/addons/products/12557 CC 2014 及更新版本。

其他安裝選項

選項 3

  • 從儲存庫下載 ZIP 檔案。
  • 解壓縮內容並從 '/build/extension' 取得 .zxp 檔案
  • 使用來自 aescripts.com 的 ZXP 安裝程式。

選項 4

  • 關閉 After Effects

  • 將壓縮檔案從 build/extension/bodymovin.zxp 解壓縮至 Adobe CEP 資料夾
    WINDOWS
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions 或
    C:\<使用者名稱>\AppData\Roaming\Adobe\CEP\extensions
    MAC
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    (您可以開啟終端機並輸入
    $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    然後輸入
    $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    以確保已正確複製)

  • 編輯登錄機碼
    WINDOWS
    開啟登錄機碼 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 並新增一個名為 PlayerDebugMode 的機碼，類型為字串，值為 1。
    MAC
    開啟檔案 ~/Library/Preferences/com.adobe.CSXS.6.plist 並新增一個索引鍵為 PlayerDebugMode 的列，類型為字串，值為 1。

選項 5

依照此處的指示手動安裝 zxp：https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html 直接跳至「安裝第三方擴充功能」

選項 6

使用 Homebrew-adobe 安裝

brew tap danielbayley/adobe
brew cask install lottie

安裝後

  • Windows：前往「編輯」>「偏好設定」>「一般」> 並勾選「允許腳本寫入檔案和存取網路」
  • Mac：前往「Adobe After Effects」>「偏好設定」>「一般」> 並勾選「允許腳本寫入檔案和存取網路」

HTML 播放器安裝

# with npm
npm install lottie-web

# with bower
bower install bodymovin

或者您可以使用此處的腳本檔案：https://cdnjs.com/libraries/bodymovin 或直接從 AE 外掛程式按一下「取得播放器」取得

示範

在此處查看基本實作。

範例

在 CodePen 上查看範例。

運作方式

這有一個影片教學，說明如何匯出基本動畫並將其載入 HTML 頁面

After Effects

  • 開啟您的 AE 專案，並在「視窗」>「擴充功能」>「bodymovin」中選取 bodymovin 擴充功能
  • 將會開啟一個面板，其中包含「合成」索引標籤，列出您專案中的所有合成。
  • 選取您要匯出的合成。
  • 選取目標資料夾。
  • 按一下「渲染」
  • 尋找匯出的 JSON 檔案（如果您的動畫中有影像或 AI 圖層，將會有一個影像資料夾，其中包含匯出的檔案）

HTML

  • 從 build/player/ 資料夾取得最新版本的 lottie.js 檔案

  • 在您的 HTML 中包含 .js 檔案（請記得針對生產環境將其壓縮）

    <script src="js/lottie.js" type="text/javascript"></script>

    您可以呼叫 lottie.loadAnimation() 以啟動動畫。它會接收一個物件作為唯一參數，其中包含

  • animationData：一個包含匯出動畫資料的物件。
  • path：動畫物件的相對路徑。（animationData 和 path 互斥）
  • loop：true / false / 數字
  • autoplay：true / false，準備就緒後即會開始播放
  • name：供日後參考的動畫名稱
  • renderer：'svg' / 'canvas' / 'html' 設定渲染器
  • container：要呈現動畫的 DOM 元素

它會傳回動畫實例，您可以透過 play、pause、setSpeed 等控制它。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

合成設定

請查看此 Wiki 頁面，以了解每個設定的說明。https://github.com/airbnb/lottie-web/wiki/Composition-Settings

用法

動畫實例具有以下主要方法

play

stop

pause

setLocationHref(href)

  • href：通常作為 location.href 傳遞。當您在 Safari 中遇到遮罩問題時，如果您的 URL 沒有 # 符號，這會很有用。

setSpeed(speed)

  • speed：1 是正常速度。

goToAndStop(value, isFrame)

  • value：數值。
  • isFrame：定義第一個引數是基於時間的值還是基於框架的值（預設為 false）。

goToAndPlay(value, isFrame)

  • value：數值。
  • isFrame：定義第一個引數是基於時間的值還是基於框架的值（預設為 false）。

setDirection(direction)

  • direction：1 是向前，-1 是反向。

playSegments(segments, forceFlag)

  • segments：陣列。可以包含 2 個數值，將用作動畫的第一個和最後一個影格。或者可以包含一系列陣列，每個陣列都包含 2 個數值。

  • forceFlag：布林值。如果設為 false，將會等到目前的片段完成。如果為 true，將立即更新值。

    setSubframe(useSubFrames)

  • useSubFrames：如果為 false，將會遵循原始 AE fps。如果為 true，將會在每個 requestAnimationFrame 中使用中間值更新。預設值為 true。

    destroy()

    getDuration(inFrames)

  • inFrames：如果為 true，以影格為單位傳回持續時間，如果為 false，則以秒為單位傳回。

其他方法

  • updateTextDocumentData -- 更新文字圖層的資料 更多資訊

Lottie 有 8 個全域方法會影響所有動畫

lottie.play() -- 具有 1 個可選參數 name，以指定特定動畫
lottie.stop() -- 具有 1 個可選參數 name，以指定特定動畫
lottie.setSpeed() -- 第一個引數是速度（1 是正常速度）-- 具有 1 個可選參數 name，以指定特定動畫
lottie.setDirection() -- 第一個引數是方向（1 是正常方向）-- 具有 1 個可選參數 name，以指定特定動畫
lottie.searchAnimations() -- 尋找具有類別 "lottie" 或 "bodymovin" 的元素
lottie.loadAnimation() -- 如上所述。傳回動畫實例以個別控制。
lottie.destroy() -- 銷毀並釋放資源。DOM 元素將會清空。
lottie.registerAnimation() -- 您可以使用 registerAnimation 直接註冊元素。它必須具有 "data-animation-path" 屬性，指向 data.json URL
lottie.setQuality() -- 預設為 'high'，設定為 'high'、'medium'、'low' 或數字 > 1，以改善播放器效能。在某些動畫中，即使低至 2 也可能看不出任何差異。

活動

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

您也可以使用 addEventListener 和以下事件

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready（當初始設定完成時）
  • data_ready（當動畫的所有部分都已載入時）
  • data_failed（當動畫的一部分無法載入時）
  • loaded_images（當所有影像載入成功或發生錯誤時）
  • DOMLoaded（當元素已新增至 DOM 時）
  • destroy

其他載入選項

  • 如果您想要使用現有的畫布進行繪製，您可以傳遞一個額外物件：「rendererSettings」，其中包含下列設定

    lottie.loadAnimation({
container: element, // the dom element
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, // the animation data
rendererSettings: {
context: canvasContext, // the canvas context
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
className: 'some-css-class-name'
}
});

    這樣做，您將必須處理每個影格後清除畫布的問題
    載入動畫的另一種方法是將特定屬性新增至 DOM 元素。您必須包含一個 div，並將其類別設定為「lottie」。如果您在頁面載入之前執行此動作，它將會自動搜尋具有類別「lottie」的所有標籤。或者，您可以在頁面載入後呼叫 lottie.searchAnimations()，它將會搜尋具有類別「lottie」的所有元素。

  • 將 data.json 新增至相對於 HTML 的資料夾
  • 建立將包含動畫的 div。

  • 必要條件

    • 一個名為「lottie」的類別
    • 一個「data-animation-path」屬性，其中包含 data.json 的相對路徑

  • 選用條件

    • 一個「data-anim-loop」屬性
    • 一個「data-name」屬性，以指定名稱來指定播放控制項

範例

 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

預覽

您可以預覽或擷取動畫的 SVG 快照以用作海報。在您渲染動畫後，您可以擷取動畫中任何影格的快照，並將其儲存至您的磁碟。我建議將 SVG 傳遞到類似 https://jakearchibald.github.io/svgomg/ 的 SVG 優化工具，並調整其設定。

建議

檔案

如果您有任何尚未轉換為形狀的影像或 AI 圖層（我建議您轉換它們，以便將它們匯出為向量，請在每個圖層上按一下右鍵，然後執行：「從向量圖層建立形狀」），它們將會儲存至目標 JSON 資料夾的相對影像資料夾。請注意不要覆寫位於相同位置的現有資料夾。

效能

這是即時渲染。雖然經過相當好的優化，但如果將 AE 專案保持在必要範圍內，總會有所幫助
更多優化正在進行中，但盡量不要在 AE 中使用巨大的形狀來遮蔽一小部分。
過多的節點也會影響效能。

說明

如果您有任何無法運作的動畫，或是希望我匯出它們，請隨時來信。
我對了解外掛程式有哪些問題真的很有興趣。
我的電子郵件是 hernantorrisi@gmail.com

AE 功能支援

  • 腳本支援預先合成、形狀、實體、影像、空物件、文字
  • 它支援遮罩和反轉遮罩。或許將來會推出其他模式，但它會對效能造成巨大影響。
  • 它支援時間重映射
  • 腳本支援形狀、矩形、橢圓和星形。
  • 運算式。請查看 Wiki 頁面以取得更多資訊。
  • 不支援：不支援影像序列、影片和音訊
  • 不支援負圖層拉伸！不知道為什麼，但拉伸圖層會搞亂所有資料。

開發

先 npm install 或 bower install，然後執行 npm start

注意事項

  • 如果您想要修改剖析器或播放器，有一些 gulp 命令可以簡化任務
  • 請查看 CodePen 上匯出的精美動畫 在 CodePen 上查看範例。
  • 壓縮動畫 JSON 和播放器，可以大幅縮減檔案大小。如果您將它用於專案，我建議這麼做。

問題

  • 若在 Safari 瀏覽器中遺失遮罩，請在產生動畫之前執行 anim.setLocationHref(locationHref)。這通常是由於 HTML 中使用了 base 標籤所導致。（如需 setLocationHref 的描述，請參閱上方）
連結