Web 動畫的十年變革：從 Flash 隕落到 Lottie 的崛起

大約十年前，網(wǎng)頁動畫面臨巨大挑戰(zhàn)。Adobe Flash 逐漸衰落，卻缺乏合適的替代方案。我們需要一種快速、易于創(chuàng)作、對網(wǎng)頁友好的格式，能夠制作大型動畫演示、卡通和橫幅廣告。

幸運的是，2014 年 Airbnb 為我們提供了解決方案——Lottie.JS。

關(guān)鍵要點：

1. Lottie.js 作為 Flash 的替代品出現(xiàn): 大約十年前，由于 Adobe Flash 的衰落，網(wǎng)頁動畫領(lǐng)域處于變革之中，缺乏清晰的替代方案來創(chuàng)建對網(wǎng)頁友好的動畫。2014 年，Airbnb 推出了 Lottie.js，這是一種基于矢量的動畫格式，旨在創(chuàng)建快速、低帶寬的動畫，可在 Web、iOS、Android、Windows 和 React Native 等多個平臺上無縫運行。由 Airbnb 的 Salih Abdul-Karim 開發(fā)的 Lottie 旨在為矢量圖形動畫提供可擴展且高效的解決方案，作為 GIF、MPEG 或 CSS 動畫的替代方案。
2. Lottie.js 的優(yōu)勢和生態(tài)系統(tǒng): 在眾多網(wǎng)頁動畫選項中，Lottie.js 憑借其不斷壯大的高質(zhì)量視覺動畫工具生態(tài)系統(tǒng)以及制作流暢、快速且可編寫腳本的動畫的能力而脫穎而出。通過利用 JSON 文件進(jìn)行動畫指令，Lottie 提供了簡化的工作流程，可以創(chuàng)建高質(zhì)量且性能高效的動畫，讓人聯(lián)想起 Adobe Flash 的創(chuàng)作和部署優(yōu)勢的結(jié)合。
3. 創(chuàng)建 Lottie 動畫的工具和實際用例: 通過各種“支持 Lottie”的動畫工具可以創(chuàng)建 Lottie 動畫，需要同時考慮動畫工具的質(zhì)量和部署 Lottie 代碼的難易程度。從 Adobe After Effects 到 Keyshape 和 LottieFiles，每種工具都提供獨特的特性、定價和平臺支持，以滿足動畫的不同需求和專業(yè)水平。Keyshape 憑借其一次性定價，代表了不經(jīng)常進(jìn)行動畫制作的用戶的經(jīng)濟(jì)高效的解決方案，而 Flow 為經(jīng)常進(jìn)行動畫制作的工作提供了全面的軟件包。LottieFiles 通過提供社區(qū)、市場和簡單的編輯實用程序來進(jìn)一步豐富生態(tài)系統(tǒng)，以支持 Lottie 動畫的創(chuàng)建和共享。

Lottie 是什么？

Lottie.js 是 Airbnb 體驗和動態(tài)設(shè)計師 Salih Abdul-Karim 創(chuàng)建的一種開源、基于矢量的動畫格式。Lottie 引擎旨在在 Web、iOS、Android、Windows 和 React Native 上以相同的方式渲染快速、清晰、低帶寬的矢量動畫。

簡而言之，如果您喜歡使用 SVG 來制作圖像，Lottie 是一種為這些矢量圖形制作動畫的好方法。如果您想用更輕、更快、更可擴展的東西來替換 GIF、MPEG 或 CSS 動畫，Lottie 可能是您最好的答案。

如 Bashir Ahmed 的精美示例所示，Lottie 可以從微小的文件中生成豐富的角色、輕盈流暢的動作——此動畫由 54kb 的文件生成。

最基本的 Lottie 動畫（如 Bashir 的動畫）只需要兩個文件：

1. Lottie 動畫播放器 (Lottie.js)
2. JSON 動畫指令文件

我為什么要選擇 Lottie？

有很多方法可以為網(wǎng)頁矢量制作動畫——從 CSS 動畫到 SVG 的 SMIL，再到 GreenSock、AnimeJS 和其他 JavaScript 庫。

但是，Lottie 具有殺手級的“一加一大于二”的優(yōu)勢：

• 不斷壯大的高質(zhì)量視覺動畫工具生態(tài)系統(tǒng)
• 能夠?qū)С隽鲿?、快速、高效且可編寫腳本的動畫

盡管 Adobe Flash 存在許多眾所周知的缺點，但其長期成功是基于將良好的創(chuàng)作工具與簡單的跨平臺部署相結(jié)合。我認(rèn)為 Lottie 具有 Flash 的一些優(yōu)勢。

如何創(chuàng)建 Lottie 動畫？

由于 Lottie 文件只不過是 JSON 文本文件，因此從技術(shù)上講，您可以直接在任何 IDE 中編寫動畫代碼。實際上，您需要選擇一個“支持 Lottie”的動畫工具。以下是我對嘗試和測試過的幾種工具的看法。

Lottie 工具綜述

• Adobe After Effects
• Haiku Animator
• Flow
• Keyshape
• LottieFiles

在我看來，選擇 Lottie 動畫制作工具時需要考慮兩個因素：

1. 它是一個好的動畫工具嗎？
2. 部署 Lottie 代碼是否容易？

我將分別針對每種工具介紹這兩個方面。

...(以下內(nèi)容對原文中各個工具的介紹部分進(jìn)行了精簡和改寫，保留了核心信息，并調(diào)整了結(jié)構(gòu)，使其更流暢易讀。由于篇幅限制，此處省略部分細(xì)節(jié)描述。)

總結(jié)

如果您經(jīng)常需要創(chuàng)建輕量級的矢量動畫，F(xiàn)low 可能是目前最專注和最完整的 Lottie 開發(fā)工具。它具有清晰的工作流程，并且導(dǎo)出選項與大多數(shù)競爭對手一樣好或更好。

如果您已經(jīng)了解并喜歡 Adobe After Effects，請使用您所了解的工具。

就我而言，我喜歡動畫，但這并不是我工作時間的主要部分。幾個月過去了，我可能都不會接觸動畫項目。我真的想要另一個每月訂閱嗎？可能……不。

對我來說，Keyshape（29 美元）似乎是一個令人驚嘆的物超所值的工具，即使它隱藏得很好。

Lottie.js 常見問題解答

...(對原文FAQ部分進(jìn)行了精簡，保留核心信息)

What is Lottie.js? Lottie.js 是 Airbnb 創(chuàng)建的一個 JavaScript 庫，允許開發(fā)人員使用名為 Bodymovin 的輕量級 JSON 格式輕松地在 Web 和移動應(yīng)用程序中嵌入和播放 Adobe After Effects 動畫。

How does Lottie.js work? Lottie.js 通過使用 Bodymovin 插件將 Adobe After Effects 中創(chuàng)建的動畫導(dǎo)出到 JSON 格式來工作。然后，Lottie.js 庫實時解析和渲染這些 JSON 文件，從而可以輕松地將高質(zhì)量動畫集成到 Web 和移動應(yīng)用程序中。

What are the advantages of using Lottie.js? Lottie.js 簡化了將復(fù)雜的動畫集成到 Web 和移動應(yīng)用程序中的過程，無需使用繁重的 GIF 或大型視頻文件。它提供高質(zhì)量、可縮放且交互式動畫，可以通過 JavaScript 輕松控制。

In which environments can I use Lottie.js? Lottie.js 多功能且可在各種環(huán)境中使用，包括 Web 瀏覽器、React Native 和其他基于 Web 的項目。它支持各種平臺和框架。

Are there any size or performance considerations when using Lottie.js? 與傳統(tǒng)的 GIF 或視頻相比，Lottie.js 動畫的文件大小通常較小，因此更節(jié)省帶寬。但是，必須優(yōu)化 After Effects 動畫以進(jìn)行 Lottie 導(dǎo)出，才能獲得最佳性能。

以上是lottie.js入門的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！