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

PattyDraw
PattyDraw
May 30, 2017 · 8 min read

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

Image for post
Image for post

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

為什麼要用Lottie?

Image for post
Image for post
這是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 以及之上的版本,我是使用這一個方式安裝的。

Image for post
Image for post

方法 2

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

步驟2 . 輸出成JSON檔案

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

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

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

Image for post
Image for post

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

Image for post
Image for post

使用上的限制

這是個方便的應用程式,但當然也會有一些使用上的限制,像是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 for post
Image for post
之前每一個元件都會需要這個步驟,現在已經有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

Image for post
Image for post
For iOS Engineer
Image for post
Image for post
For Android Engineer

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



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

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

Image for post
Image for post

使用心得:

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

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

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

Sign up for AAPD - 你的設計精神食糧

By AAPD — As A Product Designer

馬上訂閱 AAPD 接收最新 UI/UX/產品設計相關知識文章吧! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

PattyDraw

Written by

PattyDraw

Sr.Product Designer @Yahoo!

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

PattyDraw

Written by

PattyDraw

Sr.Product Designer @Yahoo!

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store