Lottie (文件)

https://airbnb.dev.org.tw/lottie 的 Lottie 文件
2,876
作者Lottie 團隊

Lottie 文件

Lottie 是一個適用於 Android、iOS、Web 和 Windows 的函式庫，它會解析使用 Adobe After Effects 製作並透過 Bodymovin 匯出的 JSON 動畫，並在行動裝置和網頁上以原生方式渲染！

設計師首次可以創造並發佈精美的動畫，而無需工程師費力地手工重新製作。俗話說一圖勝過千言，這裡有 13,000 字的價值。

Lottie Logo animation

Example1

Example2

Example3

Example4

所有這些動畫都是在 After Effects 中創建，使用 Bodymovin 匯出，並以原生方式渲染，無需額外的工程工作。

Bodymovin 是 Hernan Torrisi 創建的 After Effects 外掛程式，可將 After Effects 檔案匯出為 JSON，並包含一個 JavaScript 網頁播放器。我們在他的傑出工作之上進行擴展，使其應用於 Android、iOS、React Native 和 Windows。

請在我們的部落格文章中了解更多資訊，或透過 GitHub 或 lottie@airbnb.com 與我們聯繫

其他平台

範例應用程式

您可以自行建置 Android 的範例應用程式，或從 Play 商店下載。範例應用程式包含一些內建動畫，但也允許您從內部儲存空間或 URL 加載動畫。

對於 Windows，您可以取得 Lottie Viewer 應用程式以預覽 Lottie 動畫和程式碼產生類別，並取得 Lottie Samples 應用程式以開始使用程式碼範例和簡單的教學。

正在使用 Lottie 發佈產品嗎？

請發送電子郵件至 lottie@airbnb.com 與我們聯繫，我們很快會建立一個使用案例和真實世界使用 Lottie 的證明頁面。我們還有一個內部迴歸測試儲存庫，可用於防止您的動畫產生迴歸問題。

替代方案

  1. 手動建立動畫。手動建立動畫對於 Android 和 iOS 的設計和工程來說，都是一個耗時的工作。通常很難甚至不可能證明花費這麼多時間來使動畫正確是合理的。
  2. Facebook Keyframes。Keyframes 是 Facebook 為反應而建立的一個很棒的新函式庫。但是，Keyframes 不支援 Lottie 的某些功能，例如遮罩、遮片、修剪路徑、虛線模式等等。
  3. GIF 圖檔。GIF 圖檔的大小是 Bodymovin JSON 的兩倍以上，並且以固定大小渲染，無法放大以匹配大型和高密度螢幕。
  4. PNG 序列。PNG 序列甚至比 GIF 圖檔更糟，因為它們的檔案大小通常是 Bodymovin JSON 的 30-50 倍，而且也無法放大。
  5. 動畫向量繪圖 (僅限 Android)。效能更高，因為它在 RenderThread 而不是主執行緒上執行。僅支援 Lottie 功能的子集。無法手動設定進度。不支援文字或動態顏色。無法以程式方式或透過網際網路載入。

為什麼它叫 Lottie？

Lottie 的名字來自一位德國電影導演，也是剪影動畫的首要先驅。她最著名的電影是《阿基米德王子歷險記》(1926 年) – 現存最古老的故事長片動畫，比華特迪士尼的故事長片《白雪公主和七個小矮人》(1937 年) 早了十年以上。 Lotte Reineger 的藝術

文章、訪談和 Podcast

以下是 Airbnb Lottie 團隊的一些文章和 Podcast

社群文章和影片

以下是一些來自社群的連結

連結