告別用程式碼畫圖的痛苦！Airbnb開源工具Lottie讓你輕鬆套用動畫、不用重寫程式

Airbnb發布一款應用程式動畫工具Lottie，提供iOS、Android和React Native框架的動畫文件庫，要幫助開發者更容易在原生應用程式中加上動畫。

兩位共同創辦人都是設計背景出生的Airbnb，不僅以設計文化聞名，更以良好的設計體驗自豪。上週，Airbnb發布一款應用程式動畫工具Lottie，要幫助開發者更容易在原生應用程式中加上動畫。



######圖片來源＝Airbnb


###支援iOS、Android和React Native

在應用程式UI介面中加入動畫可提升溝通效率、改善使用體驗，但為了做出符合動畫設計師要求的效果，一個看似簡單的動畫，往往是工程師寫了上千行複雜程式碼、耗盡許多時間而來，還需替不同螢幕大小制定不同圖檔，執行起來效益相當不符合成本，也難怪許多開發者直接棄用動畫。

Airbnb工程師為了解決製作應用程式動畫的難題，釋出開源工具Lottie，其提供處理iOS、Android和React Native的動畫文件庫，可即時渲染Adobe After Effects的動畫。

透過Lottie，設計師在After Effects設計完動畫後，開發者只需透過After Effects的擴充套件Bodymovin將動畫轉成JSON檔，再使用Lottie渲染JSON檔，不用重寫程式、便可直接將動畫套用於應用程式中。



######圖片來源＝Airbnb


由於使用的動畫檔為JSON格式，Lottie大幅降低檔案大小、在應用程式中使用更有彈性，還能解決過去利用GIF和PNG序列製作動畫的缺點，如檔案過大、解析度無法用於大螢幕等。Airbnb希望透過Lottie，讓在應用程式中套用動畫就像用靜態圖檔般簡單。

「Lottie讓工程師能在應用程式中加上豐富的動畫，而不用自己動手寫複雜的程式碼。」Airbnb在部落格表示，「有了Lottie，在框架海中尋找範例、猜測畫格停留時間、手動畫貝茲曲線、只憑GIF檔就要試圖重建動畫的那些痛苦，都將成為歷史。工程師可以完全達到設計師所想的動畫效果。」



######圖片來源＝Airbnb

此外，Lottie動畫支援多尺寸螢幕，種類涵蓋應用程式內提醒、全幅動畫和評價頁面等。Lottie也提供暫存機制（caching mechanism），讓某些常用動畫（如按讚後出現的心形動畫）可以更快載入。



######圖片來源＝Airbnb

######圖片來源＝Airbnb

本文授權轉載自數位時代
原文出處