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

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


圖說明

圖片來源=Airbnb

圖說明

圖片來源=Airbnb


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

喜歡這篇文章嗎?與好友分享
VOL.
132
Nov / 2019

好生活整理習題

本期透過採集不同的生活軌跡,帶你找到屬於自己面對整理的角度,理出更好的生活。