【分享】如何使用Lottie 將完美動畫100%呈現在產品上

設計師絕對是種感性多於理性的動物,往往在某些應用程式中看到可愛動畫就會興奮不已。工作上,依照使用者的情境設計出了流暢的動畫,想跟工程師一起執行並且完成時,常常會因為時間或是資源的限制,讓這種偏Emotional的設計優先順序往後調整,難免中心會有多種不捨以及感慨(設計師的內心小劇場會開演)。

自從Airbnb開發出Lottie後,讓設計師可以運用After Effects軟體製作出動畫,透過簡單的轉檔,能讓工程師將JSON檔放入程式中,把動畫100%的呈現在你的產品上。

為什麼要用Lottie?

這是Lottie官方的示範動畫,已套用在新版的Airbnb程式上。
  • 如果你是Designer,恭喜你!現在你可以放心做動畫了,透過簡易的轉檔,可將動畫100%的呈現,真是太好了。
  • 如果你是Engineer,恭喜你!以往可能需要大量撰寫程式碼才能刻出順暢的動畫,你會發現使用Lottie後比以前省力多了,而且檔案一點也不肥。
  • 如果你是Product Manager,恭喜你!你的產品有更人性化的使用經驗,讓試用者開心之餘,也不用擔心開發時間資源不足的問題。

因為它是一套完整的Library,設計師從After Effects作出動畫以後,可以使用Bodymovin的擴充功能輸出JSON格式,可運用在iOS, Android, and React Native library之上,說了那麼多,讓我們直接跟著以下三步驟開始吧!

記得在開始前使用Lottie以前,你需要有:

(1) 動畫製作軟體 Adobe After Effects

(2) After Effects 的擴充功能 Bodymovin

步驟1 . 安裝 Bodymovin 擴充程式

After Effects plugin for exporting animations to svg/canvas/html + JS

首先你會透過這個Github連結進入到下載頁面,官方有很多條路給你選擇(我只列出兩種,剩下比較艱深的可以自行到Github去看):

方法1

透過Adobe官網 : https://creative.adobe.com/addons/products/12557

但要注意你的After Effects 的版本需要是CC 2014 以及之上的版本,我是使用這一個方式安裝的。

方法 2

官網第一推薦是從這裡下載: http://aescripts.com/bodymovin/。不過裡面不但需要註冊帳號還需要填入信用卡資訊等等,所以不一定要選這方式。

步驟2 . 輸出成JSON檔案

接著開始製作動畫,動畫製作完成後,選擇你想輸出的Composition,從Windows > Extensions > Bodymovin點擊,按下Render的按鈕,輸出時間大約在3–5秒(依你動畫的複雜度)。

因為現在已經支援Image Support,如果你的檔案裡不是用純向量繪製的話,系統會自動幫你建出一個圖庫資料夾,有個需要注意的地方,輸出的Setting可以依照原始檔案名稱,這邊自己命名好對工程師來說比較方便喔!

3 . 輸出後進行預覽,確認效果是正確的

為了避免進行開發後,如果有想調整的視覺元件,需要再重新匯入一次的狀況發生,以下提供兩種方法:

(1)直接透過Bodymovin : 當輸出成JSON檔案後,你可以透過Bodymovin做預覽動畫,只要點擊 Current Renders(預覽剛剛輸出的) 或是 Browse(從資料夾中選取),就可以逐格的看一下動畫是否有完全呈現,有些不支援的效果就會顯示不出來,稍後會說明一下使用上的限制。

(2)下載Lottie for Android : 若是手邊有Android,記得到Google Play進行下載,打開程式後可以讀取你的JSON檔案,可以再給工程師以前再做一次把關,確保你的動畫都沒問題以後即可送出!

使用上的限制

這是個方便的應用程式,但當然也會有一些使用上的限制,像是After Effects內的特效何其多,基本上目前支援的都是屬於比較基本的(但我覺得已經夠用),若你想要一些物理特效(狂暴下雪打雷)都在產品中出現,可能要再等等Lottie升級或是拜託一下工程師和你一起完成偉大的作品吧!我下面列出目前只支援的動畫效果,完整的請看這裡

Pre-composition / Keyframe Interpolation / Solids / Masks / Track Mattes / Parenting / Shape Layers / Stroke (shape layer) / Fill (shape layer) / Trim Paths (shape layer)

我還記得年初剛開始試用的時候,一切都要是向量檔(shape layer),設計師不能在熟悉的繪圖軟體繪製真的有點痛苦,加上當初無法使用Pre-compostion也是很不方便,我現在寫文章的當下這些都已經支援Image Support以及多種效果了,所以請安心服用。

之前每一個元件都會需要這個步驟,現在已經有Image Support可以支援了!免擔心

如何套用:

Android : https://github.com/airbnb/lottie-android

iOS: https://github.com/airbnb/lottie-ios

React Native: https://github.com/airbnb/lottie-react-native

For iOS Engineer
For Android Engineer

只要照著文件中的步驟,即可完成設定,但因為我是設計師,我負責幫大家找相關資料!



Android目前還沒找到相關文章(有的話歡迎留言告訴我,我再補上)。

有個好網站推薦給大家: Lottiefiles,如果你身邊沒有設計師但還是好奇想要嘗試新東西的話,可以從這邊下載檔案試試看喔!

使用心得:

目前自己使用了3個月以上,也都與工程師合作,套用在iOS系統以及Android上,整體來說滿意度蠻高的。在以前,有些動畫需要做成GIF(若複雜一點可能檔案很大),現在只要一個JSON檔案(約15KB),就可以做到一樣的效果,不但大大幫產品減肥,還可以很順暢的播放動畫,大家可以試用看看喔!另外如果對此篇有什麼需要改進或是修改的,歡迎指教,單純是想紀錄這一陣子的使用心得(其實自己也怕以後忘記),若有幫助到需要的大家就最好不過了。

謝謝你的觀看,如果喜歡也別忘了給予掌聲,你的每一個掌聲都是我持續寫作分享的動力:)

你好,我是Patty,在 UI/UX已有6年以上相關經驗,目前任職於Yahoo! Mobile Design Team擔任Product Designer,我是個外向、勇於挑戰並且喜歡嘗試新事物的設計師,工作之餘不但是個旅遊部落客也是流浪動物協會的義工,如果想要交流任何事,歡迎寄信給我 pattydraw@gmail.com :) 英文書法也是我的興趣之一喔~ https://www.instagram.com/pattyhandmade/
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.