前言
動畫工具 LottieFiles 前不久更新了 Figma 插件，支持在 Figma 中快速創建單幀或多幀動畫。其最新推出的極簡動畫設計工具 Lottie Creator 也正在公測中。
看得出，LottieFiles 正在為降低動畫設計的技術門檻而努力。但這一切，都是得益于 Lottie 的出現。
我們工作中會使用很多工具產品，卻鮮少關注產品的幕后，這篇文章就來帶你全面了解一下 Lottie 的發展之路。
相關基礎教程：
廢話不多說，一起進入正題：
Airbnb？做 AE 的動畫插件？還開源？
這是我在 2017 年某個工作日午后，看著面前一臉激動的 CTO 發出的靈魂三問。
相信很多設計師第一次接觸 Lottie 時，多少也會有類似的不解。
1. 以社區為導向的動畫工具
2015 年，動畫腳本開發者 Hernan Torrisi 開發了一款運行在 Adobe 特效軟件 After Effects（AE）里的動畫插件——Bodymovin，該插件以 JSON 格式將 AE 生成的動畫描述成文本，允許 Web 開發人員輕松訪問。
Hernan Torrisi 將其開源到 GitHub 上并作為副業一直維護和不斷更新。此外他還為 JSON 格式提供了首個渲染器（基于 JS 的 Web 動畫播放器）。而這一切的努力都被 Airbnb 的開發團隊看在眼里。
2016 年，Airbnb 的工程師 Gabriel Peal、Brandon Withrow、Leland Richardson 和動畫師 Salih AbdulKarim 一起，基于 Hernan Torrisi 和社區開發者們的貢獻又拓展出了 Android、iOS 和 React Native 動畫庫——可以解析 JSON 數據并渲染成動畫運行在移動設備上。
Airbnb 的 Lottie 多平臺宣傳圖
2017 年，Airbnb 正式推出此項目，命名其為 Lottie，并秉承著 Hernan Torrisi 的開源精神，打造了 GitHub 上的 Lottie 社區。之后在 Salih（Airbnb 前設計主管）和 Karri Saarinen（Linear 創始人）的努力下又迅速推廣到設計師圈層。
Lottie 創始者們以及 Airbnb 的 Lottie 團隊早期成員
時至今日，Lottie 當時的創始人們早已都不在 Airbnb 供職，卻仍在 GitHub 上維護著各自版本的 Lottie 動畫庫，并跟 Lottie 的后繼者 LottieFiles 始終保持著交流與合作。
2. Lottie 是什么？
前面講了 Lottie 的由來，那 Lottie 具體是什么？
先來看看 Airbnb 的官方說法：
Lottie 是一種適用于 Android、iOS、Web 和 Windows 的動畫庫，它使用 Bodymovin 導出為 JSON 格式的 Adob??e After Effects 動畫，并在移動設備和 Web 上本地渲染它們！
官方簡單把它描述為動畫庫，但事實上，Lottie 并不是具體的某一個產品或工具，它是一套成體系、跨平臺的完整動畫解決方案。
這一點，我們通過了解 Lottie 的工作原理便可領會：
3. Lottie 的工作原理
原理很簡單，設計師在 AE 中制作完動畫，安裝好的 Bodymovin 插件可以將 AE 生成的 .aep 格式文件轉換為 Lottie 可以解析的 .json 文件，平臺安裝了 Lottie 動畫庫就可以直接渲染動畫并繪制在設備上。
整個流程如圖所示：
截至目前，在主流系統 Web、iOS、Android、Windows、React Native 和其他平臺 Xamarin、NativeScript、Vue、Angular、QT、Skia、Framer X、Sketch 中均存在開源和免費的 Lottie 播放器。
另外需要注意，在 AE 中使用 Lottie 時要避免使用位圖，Lottie 只能解析矢量圖形，盡量不要使用表達式、蒙版、合并路徑等功能，它更適合用來制作應用程序里的加載、刷新、小提示、icon 點擊或 tab 切換等特定場景下動畫。
4. 為什么叫 Lottie
Lottie 取自德國剪影動畫先驅 Charlotte Lotte Reiniger（1899 年～1981 年）的中間名。
Lotte 是一位才華橫溢充滿創造力的動畫導演，以她開創性的定格剪影動畫而聞名。她一生制作了大概 70 余部動畫和影片，多取材自神話、童話和寓言。
Charlotte Lotte Reiniger 于 1972 年獲得德國電影獎金獎
因受納粹迫害，導致二戰期間顛沛流離，Lotte 很多戰前的作品被損壞或遺失，她于 1926 年發行的《艾哈邁德王子歷險記》(The Adventures of Prince Achmed)，被認為有可能是世界上第一部長篇動畫電影。
Airbnb 團隊以 Lottie 來紀念這位動畫先驅，同時也寄予了 Lottie 兼備開創性和創新性的期望。
5. Lottie 的優勢所在
講了這么多，到底 Lottie 好在哪里？有什么具體優勢？
我們先來看幾個動畫：
多鄰國 App 內形象動畫
TG 動態貼紙
toss 大量使用 3D 位圖與 Lottie 動畫結合
以上這些動畫無一例外都是 Lottie 實現的，在動畫落地方面，Lottie 是設計師和開發者協作的最佳橋梁。
它的具體優勢如下：
- 易操作
- 高質量、輕量級
- 基于矢量，可擴展性好
- 跨平臺，適用任何設備
- 可交互性
比起 GIF，Lottie 動畫小了 600 倍，交付速度快了 10 倍；Lottie 解析的 JSON 格式通常只有幾千字節，這意味著它生成的動畫體量極小，極大減少系統和設備的負載；因為 Lottie 支持的是矢量動畫，生成文件可以在不影響質量的情況下隨意縮放，在任何設備上都不會掉幀卡幀；視覺上，Lottie 也支持透明度和漸變等效果，這一點，GIF 首先不支持透明度，而且還有最讓設計師頭痛的邊緣鋸齒問題；另外，前面也說了，Lottie 社區有針對各種平臺和系統的動畫庫，你能想到的平臺，都可以運行 Lottie 動畫。
圖源：whatislottie?
Lottie 對數字產品的支持優于其他所有格式，更重要的是，它的內置選項支持你在加載頁面時自動播放動畫，可以設置循環播放、懸停播放、加/減速、添加播放控件甚至基于交互手勢觸發。你還可以在代碼層面指定寬高和背景色。
毋庸置疑，Lottie 的流行讓互聯網數字產品都靈動了起來，越來越多的產品開始拓展自己的品牌形象動畫，因為動態總是比靜態更有記憶點和辨識度。試想一下，如果多鄰國 app 里的卡通形象都是純靜態的，你的使用體驗會不會大打折扣。
盡管 Lottie 有以上諸多優點，其最實質性的作用還是在于——解決了動畫交付和落地效果的現實難題。
這就不得不回溯歷史，從 Flash 的慘淡退場講起了。
前不久我在某微信群看到一張招聘截圖，招聘要求上赫然寫著「熟練掌握 Flash」，心想這 JD 夠復古的。
Flash 對上了點年紀的設計師來說，是一段悲傷往事。
Flash 徹底退場是在 2021 年（2021 年 1 月 12 日，Adobe 禁止全平臺運行所有 Flash 內容）。但它在 2011 年就因為喬布斯與 Adobe 交惡而被迫退出了 Apple 市場，當時的 Flash Player 正是 Adobe 的主要盈利項目。
當時，喬幫主列出了 Flash 的三宗罪：
- 非開源
- 性能差、安全漏洞
- 不支持觸摸屏交互
一通操作后，Flash 徹底失去了移動端市場，甚至電腦端的市場份額也受到影響。這一切幾乎斷送了 Flash，卻也催生了 HTML5 的流行。
圖源：Sofia Green
是危機也是轉機，這之后 Adobe 把商業重心轉移到了 Adobe 全家桶上，推出了 CC 系列，拓展了更大的市場，瘋狂收購更是停不下來，然后就有了去年「Adobe 收購 Figma 并認購股票，斥資 200 億美元」這樣震驚設計圈一整年的炸裂新聞！
Flash 最初也是 Adobe 收購來的，跟古早的 Fireworks、Dreamweaver 一起打包以 36 億美元的價格包圓，而其中的 30 億美元都被用于 Flash。之后 Adobe 將 Flash 重新命名為編輯器 Flash Professional（2016 年改名為 Adob??e Animate）和播放器 Flash Player。
事實上，Flash 本身也確有很多問題，最典型的就是用戶必須在本地安裝 Flash Player，需要經常更新插件不說，Flash 動畫通常還需要加載一下才能正常顯示，這非常挑戰用戶的耐心。誠然，Flash 是劃時代的產品，但隨著數字設備的升級換代，Flash 逐漸力不從心也是事實。
總之先拉回來，為什么要講這段陳谷子爛芝麻？
正因為 Lottie 的誕生與 Flash 的退場息息相關。
迫于 Flash 離開了 Apple 平臺，Bodymovin 的開發者 Hernan Torrisi 才不得已開發替代品來彌補 Flash 留下的缺口，他成功了，就有了后來的 Lottie。
談到 Lottie 的影響，他直言：
事實上，Lottie 減少了代碼量從而促使進了這種解決方案的可行性，我認為這是支撐 Lottie 重要性的柱石。即使從開發者的角度，使用 Lottie 實現動畫也是非常簡單。因此，它不僅是設計師的簡單解決方案，也是開發者的簡單解決方案。
的確，Lottie 為開發者節省了大量的時間，要知道，以往做動畫，迫于現有格式的限制，往往為了更好的產品體驗，是需要讓開發者直接用代碼去繪制的。同時，設計師還要輸出 demo 和詳細標注，遇到比較懶的設計師，開發人員的工作量就主打一個加倍，看到「會動的」設計需求就瑟瑟發抖。
而設計師這邊也不輕松，對設計師來說，做設計不是最困難的，交付物料環節才最麻煩。
在軟件里做完動畫，要么需要導出序列幀再到 PS 里生成 GIF 文件，要么就是導出序列幀生成雪碧圖或者轉換成 APNG 文件，中間還要涉及圖像壓縮、監測色值變化、導出效果等等。最糟心的是，交付之后運行起來發現掉幀還要再回爐重造，之后整個流程再來一遍或多遍。光是這樣描述一下都讓人倍感心累。
自從有了 Lottie，這些復雜環節統統都不需要了。設計師可以集中精力在動畫制作上，在 AE 里設計完動畫使用 Bodymovin 直接導出 JSON 文件即可。
而開發者這邊拿到 JSON 文件后，只需要使用 Lottie 播放器渲染即可直接在設備上運行，也不需要再拿素材反復調試，也不用在代碼里構建復雜效果。相信沒有哪個平臺開發者是不喜歡設計師提供 Lottie 格式動畫的。
看到這里，是不是能理解開篇我的那位 CTO 為什么一臉激動了。有人說設計師 + Lottie =「開發者友好」動畫，不無道理。
解放了生產力，優秀的產品設計和動效體驗成幾何增長，以至于在全球排名前 500 的應用程序中你都可以看到 Lottie 動畫的身影。
既然 Lottie 主打構建開源社區，那么基于 Lottie 的拓展項目就會不斷涌現。
2017 年，LottieFiles 初始版本發布，支持 Lottie 動畫預覽和文件管理，團隊致力于打造全球最大的免費動畫平臺。
2018 年，Microsoft 和 .Net Foundation 發布了 Windows for Lottie。
同年，Skia 團隊基于 Skia 和 WASM 等底層技術打造了 Lottie 播放器，命名為 Skottie。
2019 年，Qt 提供了一個 QML API，用于渲染 Lottie 動畫。
同年，三星發布了 rLottie，一個獨立于平臺的基于 C++ 的 Lottie 渲染器，并在 Tizen 中添加了對 Lottie 的支持。
2020 年，Rive 團隊著力于開發可以替代 Lottie 的全套解決方案。他們新近推出了一款基于 Web 的動畫編輯工具，用于制作實時交互式動畫和設計，類似于游戲引擎，目前在公測中，多鄰國設計團隊 已經在使用。
Rive Editor 官網截圖
雖然花開遍地，但還是想著重講講與 Lottie 一脈相承的 LottieFiles，因為它真正實現了 Lottie 的產品化，強化了 Lottie 的品牌觀感。唯一可惜的是它由 Airbnb 以外的團隊打造。
1. 「Airbnb 的 Lottie」已成往事
Lottie 自誕生之初就由 Airbnb 負責推廣。但為什么 Airbnb 沒有將其持續產品化，僅為他人做嫁衣呢？
我想這和 Lottie 的開源屬性，以及 Airbnb 本身的主營業務屬性有關。對 Airbnb 來說，當時的 Lottie 也不具備什么商業價值，只是剛好 Lottie 這種開放共享的調性跟公司的品牌形象比較契合罷了。
而核心成員的相繼離職也是注定了 Lottie 無法在 Airbnb 內部再有所作為。但不管怎么說，他們已經在全世界范圍內打造了 Lottie 的開源社區影響力，為后續其他團隊對 Lottie 的產品化鋪好了路，打下了基礎。
2. 從 Lottie 到 LottieFiles
LottieFiles 完整繼承了 Lottie 的衣缽，繼續將 Lottie 的影響力發揚光大，這點從其 logo 設計上可以看出：
Lottie
LottieFiles
LottieFiles 的 logo 沿用了 Lottie 的藍薄荷色調以及「貝塞爾曲線」的形狀創意，極度簡約且有高度可辨識性。具體的設計闡釋可以在其 品牌 博文中了解（Lottie 的品牌闡述很直白，沒有方法論，想來遵循直覺的設計也并不是罪）。
LottieFiles 由聯合創始人 Minglani 和 Nattu Adnan 在 2017 年創立，2018 年在美國加州正式注冊公司，背后是一個不到 200 人的跨國遠程協作團隊。
現在，它已經是一個基于 Lottie 的成熟動畫平臺，包括 Lottie 動畫創建、編輯和測試工具，以及全球最大的開源動畫市場。目前擁有來自全球 25 萬家公司的超 450 萬用戶，包括 Airbnb、Google、TikTok、Uber、Disney 和 Netflix。
團隊 A 輪融資籌集了 900 萬美元，由 Microsoft 的風險投資部門 M12 領投。到 2022 年 B 輪融資又籌集到了 4700 萬美元，由 Square Peg Capital 領投。
拿了投資不能不干活，這幾年 LottieFiles 基本上把能出的插件都出了，能支持的平臺都支持了，能聯動的軟件都聯動了，能開發的工具也都開發了。嫌 Lottie JSON 還不夠小，就有了 Optimized JSON，還不夠就有了 dotLottie，再不行就上 Optimized dotLottie，總之都可以是收費點。
大概做產品的套路皆是如此，但創新畢竟不能僅靠熱情還要有面包才行。我們倒也不能簡單的把完全開源的 Lottie 奉為圭臬，對訂閱制的 LottieFiles 就嗤之以鼻，目前來看 LottieFiles 的吃相還是可以，努力變現的同時還是很珍惜羽毛。
這樣說可能還是有點抽象，我們具體來看看 LottieFiles 近年都做了哪些努力：
3. LottieFiles 做了哪些事？
①打造了一個大社區
意在鼓勵開發者、設計師來共同創建和探索其提供的內容。 從而也倒逼自己不斷推動 LottieFiles 發展來為創意社區提供進一步的服務。
LottieFiles 社區頁截圖
②升級了 LottieFiles 平臺
LottieFiles 最早是作為 AE 內的插件推出，類似 Bodymovin，但增加了軟件內預覽和文件上傳管理等功能，還有配套的移動端預覽應用程序。
現在它已經發展到了平臺級。
插件：
LottieFiles 插件覆蓋到了互聯網的各個角落，集成進了各大設計軟件（AE、Protopie、Figma、Sketch、Canva ）和平臺（Apple、Windows、Google）以及建站工具（Framer、Webflow、Wordpress、Elementor）。
管理：
利用插件可以直接導出或預覽，但同時也可上傳 Web 端 LottieFiles 進行簡單編輯、調試、優化和管理，支持導出的格式有：Lottie，dotLottie，GIF，MP4，Transparent MOV 和 WebM。此外它還有版本管理和團隊協作功能（收費）。
如果是開發者，利用插件你也可以在 VS Code 里編輯 Lottie 動畫顏色，或者使用 Lottie JSON 編輯器 來修改。
社區：
同時，你也可以把作品發布到社區，有免費動畫社區，也有創作者社區，可以在社區找到素材，也可以通過售賣作品獲取收益。
工具：
LottieFiles 目前已經自主開發了大到 iOS 端 LottieFiles 應用程序、LottieFiles 桌面端、在線動畫編輯器 Lottie Editor、動畫設計工具 Lottie Creator（公測中）；小到 Web 播放器、SVG 轉 Lottie、Lottie 轉 GIF、JSON 編輯器等工具。
以上統統都是免費工具。
③收購并集成了素材庫 IconScout
IconScout 是一個成立于 2016 年的素材庫，總計超 6 萬個高度可定制（帶源文件）的圖標、2D 插圖和 3D 插圖，該平臺可下載資源豐富的同時也為創作者帶來很可觀的收入。
不難理解 LottieFiles 收購 IconScout 的意圖，從平臺角度來說，屬于補足短板強強聯合了。另外更重要的是，IconScout 平臺有大量 SVG 格式素材。
SVG 一直是比較受開發者歡迎的矢量圖片格式，各大團隊也鼓勵設計師輸出 SVG 格式的物料。但 iOS 和 Android 原生對 SVG 的支持并不算完美，且使用 SVG 落地動態圖像，需要開發者在代碼中編輯，而且對性能的影響也不可控。
2020 年 LottieFiles 就推出了 SVG 轉 Lottie 的工具，你可以把 SVG 轉換為 Lottie 格式的靜態素材，也可以直接生成簡單動態素材。2021 年收購 IconScout 之后，很快也推出了 SVG 色彩編輯器，同時也在其官網集成了 SVG 轉 Lottie 的工具。
④推出了 dotLottie 格式
LottieFiles 團隊在 2020 年推出了 dotLottie 格式（.lottie）。
這是 Lottie JSON 格式（.json）的超集?？蓪⒁粋€或多個 Lottie 動畫及其相關資源整合到單個文件中，且體積更小?？梢岳斫鉃槭?Lottie 的壓縮版本，壓縮率達 80%。該格式也有適用于 Web，iOS 和 Android 的 開源庫。
Lottie 發展到 LottieFiles 這一步，官網已經把它描述為僅僅是一種格式了。畢竟人家有了自己的品牌體系，要強化的概念是「LottieFiles」而不是「Lottie」。
如果有天 dotLottie 格式被普遍應用了，Lottie JSON 自然也就慢慢淡出人們視野了。這只是一種可能性，我們不多評說，畢竟 Lottie JSON 目前依舊還是主流。
⑤重設計了編輯器 Lottie Editor
Lottie Editor 集成在 LottieFiles 里作為素材調整和編輯工具，同時也有獨立的編輯器。
它的作用主要就是，當你需要簡單修改動畫文件時，不必打開源文件不必返回設計軟件中，快速微調（尺寸、幀速等）、改色、編輯文本、圖層排序或隱藏圖層以及優化文件大小。
事實上，其功能只是作為輔助，作為獨立的編輯器用處不大，這就能理解為什么團隊還要再開發一個專門的動畫設計工具 Lottie Creator 的了。
⑥推出了動畫編輯器 Lottie Creator
官網稱 Lottie Creator 是一款革命性的工具，界面直觀操作簡單，學習成本低，可以使任何人都能在 Web 端設計并創建動畫。
Lottie Creator 官網截圖
關于這款工具，本文不多展開，因為我也還在候補名單上排著。看截圖，感覺界面確實很簡潔，如果用過 AE 應該可以感受到反差有多大。
但本身對這款工具不抱太多期待，同類工具已經有很多了，而且 Lottie 的優勢也不在設計動畫上，感覺推這個工具就完全出于商業考量吧。盲猜玩不出新花樣，希望到時會被打臉。
⑦更新了 LottieFiles for Figma 插件
如果想在原型中添加動畫進行演示，那么你可以考慮 LottieFiles for Figma 或者 LottieFiles for ProtoPie。唯一的區別就是，Figma 原生不支持 Lottie 格式，但 ProtoPie 支持。
但 LottieFiles 近期更新了 Figma 插件功能，可以直接用 Frame 畫出幾個關鍵幀，利用插件一鍵生成動畫，也可以快速預覽原型動畫并生成 GIF。
Figma 本身可以制作補間動畫，但必須添加原型設置。動畫制作的插件當然也有不少，但這個最簡單，我們也著實沒必要在 Figma 里制作復雜動效或高階動畫。
當然 LottieFiles 最實用之處還是——可以把 Figma 里的動畫導出成能直接交付給開發的 Lottie 或 GIF 等文件。（需要注意，導出 GIF 超過 500px 就不免費了。）
對 UI 設計師來說，如果 Figma + LottieFiles 就能把需求搞定，能擺脫 AE 的多年支配何樂不為。
產品化并不只有 LottieFiles 在探索，只是它的探索成功了，也實現了盈利，兼顧了業界口碑，這相當具有參考價值。
看到這里不容易。我們來放松下大腦，上手試玩一下怎么樣？
玩之前，我們先來厘清兩個概念：
我注意到作為動畫工具，LottieFiles 最常提及的詞不是 Animation（動畫）而是 Motion（動效），Animation 專指動畫，而 Motion 通常是指和交互直相關的動態圖形或效果。
事實上，AE 可以做出豐富帶有故事性的「Animation」，而 Lottie 拿來用的功能也就一小部分，僅滿足于應用程序的「Motion」需求即可。把 AE 比作豪華游艇的話，Lottie 就是上面的一艘小小救生艇，在特定場景下可以救救急。
在專業學科上，Animation 和 Motion 是兩個不同的概念。但 UI 設計行業內，并未對這兩個概念特意做區分，甚至連在一起講的情況也很多。包括在國內，一個控件都能整出八種叫法，我們自然也不必去較這個真，理解為主。
先一起來做個最簡單的操作——在你的 Notion 文檔嵌入動畫：
比如我用 Notion 給 Microsoft Loop 搭一個介紹頁，然后想把 Microsoft Designer 的 logo 動圖嵌進來（相當混搭了也是）。
只需要在 LottieFiles 動畫庫里選好素材，右鍵復制 oEmbed 地址。
在 Notion 里嵌入一個 Embed 塊，把素材貼上去，完事大吉！
再來試試 LottieFiles for Figma 插件：
LottieFiles 提供了很多現成模版，做好的原型可以在插件里直接預覽，也能生成 GIF 插入文件。
不加原型設置，也可以直接拉幾個 frame 創建單幀/多幀動畫。
動畫可以加在原型上拿去演示，也可以上傳到 LottieFiles 工作區導出各種所需格式（部分需要收費）。
LottieFiles 一直在致力于降低做動畫的門檻，現在做產品不都講究一個「人人都會」嘛！
前面也講過，LottieFiles 可以讓 SVG 轉 Lottie 生成動態圖，咱們再來迅速體驗一把：
如果手頭沒有 SVG 素材那就先去 下載 一個。
然后打開 轉換工具，左邊是各種效果預覽，咱就按自己喜好選吧。
做好了，導出需要的格式就行，就是這么簡單。
其實行業里，和 Lottie 的屬性類似的工具也有一些，包括國內有大廠團隊也推出過比較高效的工具，但像 Lottie 這樣在全球范圍內有如此大影響力的屈指可數。
Lottie 妥妥地源自為愛發電，正是其開放精神和創新精神造就了創作者與其雙向奔赴。它影響了一大批開發者和設計師，從而給互聯網應用市場注入了新生氣，讓靈動的創意之花可以在用戶的指尖肆意綻放。
最后再啰嗦兩句：動效雖好，不可貪多。動效用好了自然給產品加分，比如多鄰國，但濫用動效的案例也比比皆是。設計始終都是為內容、為功能和體驗服務，不是拿來炫技的，濫用不如不用。
文章有點長，感謝閱讀。
參考資料：
Airbnb Lottie 主頁、Airbnb 博客、Lottie Product hunt 主頁、LottieFiles 官網、LottieFiles 博客、LottieFiles 社區?、IconScout 官網、Rive vs Lottie
附：推薦學習資料：
動畫理論：
動畫師：
Arm Sattavorn、Emanuele Colombo、Animatter、Amy Charlick、Henrique Barone、Nuria Boj、David Probst Jr?、DEEKAY、Alfie Bogush、Mathias Lynge
動畫工作室：
Gunner、Buck、The Furrow、Animade、Andrew Vucko、Oddfellows
動畫課程：
School of Motion、Motion Design School、Mograph Mentor
素材網站：
設計個站（應用了 Lottie 動畫）：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 離家出走的帆高