Lottie簡介（翻譯）

如下內容爲原創，歡迎轉載，轉載請註明
來自每天博客：http://www.cnblogs.com/tiantianbyconan/p/6364634.html

Lottie簡介（翻譯）

原文：https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e#.mfnxbtt06

新的向本地apps的構建動畫的開源工具。

做者：Brandon Withrow, Gabridl Peal, Leland Richardson 和 Salih AbdulKarim

在之前，在Android，iOS和React Native app上面構建複雜的動畫是困難和冗長的過程。你要麼不得不爲每一個尺寸增長大量的圖片文件，要麼乾脆編寫數千行不可維護的代碼。正由於如此，大多的apps並無使用動畫——儘管這是一個交流想法和建立引人注目的用戶體驗的強大的工具。一年前，咱們就開始改變。

今天，咱們很高興來介紹咱們的解決方案。Lottie是一個iOS，Android和React Native庫，能夠實時渲染After Effects動畫，而且容許本地app像靜態資源那樣輕鬆地使用動畫。Lottie使用名爲Bodymovin的開源After Effects的擴展程序導出的JSON文件格式的動畫數據。擴展程序與JavaScript player捆綁在一塊兒，能夠在web上渲染動畫。自從2015年2月開始，Bodymovin的建立者，Hernan Torrisi經過每個月爲插件添加和改進功能，打造了堅實的基礎。咱們的團隊（Brandon Withrow 在 iOS, Gabriel Peal 在 Android，Leland Richardson 在 React Native，和 我 在體驗設計上）在Torrisi的非凡的工做之上開始咱們的旅程。

輕鬆地構建一個豐富的動畫

Lottie容許工程師構建一個豐富的動畫，而沒有艱苦地重寫它們的開銷。Nick Butcher's的跳躍動畫,Bartek Lipinski的漢堡菜單, 和Miroslaw Stanek 的Twitter愛心, 演示它們是多麼困難和耗時，它能夠用scratch重建動畫。使用Lottie，挖掘參考框架，猜想持續時間，手動建立貝賽爾曲線，並從新制做只有一個GIF做爲參考的動畫將是過去了。如今工程師能夠準確地實現設計者的意圖，到底是怎麼作的。爲了證實它，咱們重建立了它們的動畫，而後在咱們的每一個例子中提供了After Effects和JSON文件。

咱們的目標是儘量多地支持After Effects的特性，而不僅是簡單的圖標動畫。咱們建立了一些其餘例子來展現庫的靈活性，豐富性和深刻的功能集。在例子app中，有用於各類不一樣種類的動畫的源文件，包括基本線條藝術，基於字符的動畫，以及具備多個角度和切割的動態logo動畫。

咱們已經開始在一些界面上使用咱們本身的Lottie動畫，包括應用內通知，全幀動畫插圖和在咱們的審查流程中。咱們計劃以一種有趣而有用的方式大大增長咱們對動畫的使用。

靈活高效的解決方案

Airbnb是一個全球的公司，它支持數百萬的顧客和主人，全部在多個平臺上播放的靈活動畫格式對咱們來講是很是重要的。有一些與Lottie相似的庫，如Marcus Eckert的Squall和Facebook的Keyframes,可是咱們的目標略有不一樣。Facebook選擇了一小部分After Effects的特性進行了支持，由於它們主要集中在響應，可是咱們想要儘量多地支持。至於Squall，Airbnb的設計師組合Lottie來使用它，由於它有一個驚豔的After Effects預覽app，這使得它成爲咱們工做流必要的一部分。然而，它只支持iOS，咱們的工程師團隊須要一個跨平臺的解決方案。

Lottie還在其API中內置了幾個功能，使它更多樣化和高效。它支持經過網絡加載JSON文件，這在A/B測試是很是有用。它還有一個額外的緩存機制，因此頻繁使用的動畫，好比一個願望清單的愛心，能夠每次加載一個緩存的副本。Lottie動畫能夠經過使用動畫進度功能的手勢驅動，而且動畫速度能夠經過簡單改變值來控制。iOS甚至支持在運行時增長額外的本地UI到一個動畫中，這能夠用於複雜的動畫過渡。

除了咱們迄今爲止的增長全部After Effects特性和API以外，咱們還有許多將來的想法。它們包括映射視圖到Lottie動畫中，使用Lottie控制視圖過渡，支持Battle Axe 的 RubberHose，漸變，類型和圖像的支持。最難的部分是下一個特性支持應該選擇哪個。

構建社區

做爲開源發佈一些東西，並不僅是把它拿出來作爲公共使用。它是一我的跟人之間鏈接和交流的橋樑。隨着咱們更接近經過GitHub向設計師和工程師發佈Lottie，咱們也想確保與動畫人員進行鏈接。

咱們受到了建立的9 Squares，Motion Corpse和Animography的啓發。全部這三個都彙集了來自世界各地的人，在公共動畫項目上合做，他們可能永遠不會一塊兒工做。這些項目花費了幾個月的工做和不少的組織，各自團隊的爭論，可是它們無疑對整個動畫社區提供了巨大的價值。Motion Corpse 和 Animography 公開分享了After Effects的源文件，它們提供了大量人們怎麼工做的深入的看法。

在他們的合做領導下，咱們接觸了全部這三個團隊，爲咱們的示例app貢獻了動畫。咱們包括了一個來自 Motion Corpse J.R Canest 建立的動畫，來自9 Squares 項目的 Al Boardman 的square之一，和一個使用Animography的Mobilo動畫字體的鍵盤動畫，其中有二十多個藝術家的工做。咱們但願這些動畫社區與強大的工程社區的合併將產生一些特別的東西。

從左到右：Motion Corpse 的 Jr.canest，來自 9 Squares 的 AI Boardman，Animography 的 Mobilo 字體動畫

咱們想聽到你怎麼去使用Lottie——不論你是一個設計師，動畫師，仍是工程師。請隨時直接經過 lottie@airbnb.com 帶着你的想法，反饋，看法與咱們聯繫。咱們很高興看到當他們開始以咱們從未想象的方式使用Lottie時，世界各地的社區將會作些什麼。

下載 Bodymovin，Lottie iOS，Android 和 React Native

最初發佈於 airbnb.design/lottie/