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

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

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

Airbnb

支援iOS、Android和React Native

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

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

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

Airbnb

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

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

動畫種類多、支援跨平台、多尺寸螢幕

在Lottie推出前也有類似的應用程式動畫文件庫,如Marcus Eckert開發的Squall和Facebook開發的Keyframes。不過,Keyframes只提供少量的After Effects特效,並未像Lottie同樣支援遮罩、修剪路徑等功能;而Squall雖然有大量的After Effects特效,但只支援iOS,Lottie則是支援跨平台。

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

Airbnb

資料來源:AirbnbGitHub

每日精選科技圈重要消息