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