Lottie 動(dòng)畫(huà)設(shè)計(jì)指南，阿里新出犸良就是Lottie

 

最近阿里新出的犸良在線制作動(dòng)畫(huà)工具就是基于lottie制作技術(shù)原理，阿里犸良 ： https://design.alipay.com/emotion

 

關(guān)于動(dòng)效設(shè)計(jì)，是 UI 設(shè)計(jì)當(dāng)中不可或缺的一環(huán)。大家對(duì)動(dòng)效的認(rèn)知也從最初認(rèn)為動(dòng)效只是為了美觀酷炫，到逐漸理解了動(dòng)效對(duì)于提升用戶體驗(yàn)和產(chǎn)品需求的重要作用。而導(dǎo)致這種認(rèn)知的轉(zhuǎn)變，相當(dāng)一部分原因是因?yàn)橛布阅艿陌l(fā)展和動(dòng)效輸出方式的優(yōu)化。使用原生代碼在各平臺(tái)實(shí)現(xiàn)復(fù)雜的動(dòng)效是一件性價(jià)比較低的事，還要考慮到適配不同屏幕尺寸。無(wú)論對(duì)設(shè)計(jì)師還是開(kāi)發(fā)人員都是比較繁瑣的。而使用了lottie之后，可以做到同一個(gè)文件能應(yīng)用到不同的平臺(tái)，還能極大地減少開(kāi)發(fā)成本。

 

一、什么是lottie？

Lottie 是Airbnb開(kāi)源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫(huà)庫(kù)，能分析 Adobe After Effects 導(dǎo)出的動(dòng)畫(huà)。不僅使用簡(jiǎn)單，還能很好地實(shí)現(xiàn)動(dòng)效設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫(huà)效果。而怎樣才能將設(shè)計(jì)師在AE里制作好的較為復(fù)雜的動(dòng)畫(huà)轉(zhuǎn)換成lottie？這時(shí)候今天的主角Bodymovin就要出場(chǎng)啦~~就是這個(gè)叫Bodymovin的AE插件，是一個(gè)可以把動(dòng)效設(shè)計(jì)師在AE里做好的動(dòng)畫(huà)導(dǎo)出為json格式，然后以Android/iOS原生動(dòng)畫(huà)的形式在移動(dòng)設(shè)備上渲染播放。能幫助設(shè)計(jì)同學(xué)很容易的將AE動(dòng)畫(huà)導(dǎo)出成代碼文件提供給開(kāi)發(fā)同學(xué)使用。現(xiàn)在我用工作中使用到的案例給大家分享Bodymovin這個(gè)插件具體的應(yīng)用。

 

是不是聽(tīng)起來(lái)很心動(dòng)？其實(shí) Lottie 已經(jīng)火了一兩年了，很多人應(yīng)該也看了一些介紹。希望工作項(xiàng)目中經(jīng)常涉及到動(dòng)效設(shè)計(jì)，但是還在用老方法的同學(xué)?？梢試L試使用 Lottie 幫助動(dòng)效落地，提升團(tuán)隊(duì)工作效率和個(gè)人影響力。

 

二、Lottie有什么用？

Lottie 可以應(yīng)用在 UI 設(shè)計(jì)的很多場(chǎng)景中。以下舉出幾個(gè)常用例子。

1. 動(dòng)態(tài)啟動(dòng)頁(yè)

 

2. 動(dòng)態(tài)圖標(biāo)/按鈕

 

3. 空頁(yè)面

 

4. 加載/下拉刷新

 

5. Banner/彈框

 

6. 表情/禮物/動(dòng)態(tài)貼紙

以上僅列舉了部分常用案例，其實(shí) Lottie 的應(yīng)用場(chǎng)景遠(yuǎn)不止這些。在 APP 的多個(gè)模塊中都可以運(yùn)用，那么我們要如何將 Lottie 運(yùn)用在自己的工作項(xiàng)目中呢？那就要了解 Lottie 的原理了。

 

 

三、Lottie的工作流程

簡(jiǎn)單講就是： 

1、使用AE  

2、使用Bodymovin 導(dǎo)出Json 數(shù)據(jù)， 程序可直接使用~~ 

3、交付給開(kāi)發(fā)使用 

 

Tips:在導(dǎo)出json文件時(shí)，可以點(diǎn)擊設(shè)置圖標(biāo)，選擇其他幾種不同的方案

1、Split : 為動(dòng)畫(huà)分解成多個(gè)文件

2、Glyphs: 將字體轉(zhuǎn)換成圖形形狀(建議勾選這個(gè)選項(xiàng))

3、Hidden: 隱藏，檢查導(dǎo)出時(shí)需要隱藏的圖層

4、Guides: 向?qū)В瑱z查導(dǎo)出時(shí)需要導(dǎo)出的向?qū)?/p>

5、Extra Comps: 額外補(bǔ)間，檢查表達(dá)式是否指向所有補(bǔ)間動(dòng)畫(huà)

6、Assets: 資源，輸出項(xiàng)目圖片格式

 

每次導(dǎo)出時(shí)都需要進(jìn)行設(shè)置。標(biāo)紅區(qū)域?yàn)楸剡x選項(xiàng)。字體圖形化可以將字體轉(zhuǎn)化為路徑，不勾選會(huì)因?yàn)閼?yīng)用的平臺(tái)沒(méi)有相應(yīng)字體導(dǎo)致文字加載出錯(cuò)；勾選演示模式后會(huì)生成 html 文件，打開(kāi)該文件即可預(yù)覽動(dòng)效。

當(dāng)含有圖片資源時(shí)可以根據(jù)需要選擇勾選對(duì)應(yīng)的選項(xiàng)。

 

保存好設(shè)置后，點(diǎn)擊渲染即可生成動(dòng)效文件給開(kāi)發(fā)。當(dāng)只有矢量圖層時(shí)，開(kāi)發(fā)只需要使用 json 文件即可。當(dāng)含有圖片文件時(shí)需要將 json 文件和圖片文件夾一并給到開(kāi)發(fā)人員使用。需要注意的是不能隨意修改文件夾名稱和內(nèi)部文件名。如果需要修改圖片名稱，應(yīng)該同步修改 json 內(nèi)部代碼。相關(guān)修改方法，后續(xù)文章將會(huì)詳解。

 

 

四、Lottie可控制幀數(shù)

前面已經(jīng)提過(guò) Lottie 是 Airbnb 開(kāi)源的一個(gè)動(dòng)畫(huà)渲染庫(kù)。我們可以理解為它是一個(gè)多功能的視頻播放器，開(kāi)發(fā)人員需要將這個(gè)播放器部署到相應(yīng)的環(huán)境中。然后設(shè)計(jì)人員提供視頻（動(dòng)效文件）給開(kāi)發(fā)人員，讓開(kāi)發(fā)人員按照要求播放視頻文件，即可完成動(dòng)效的應(yīng)用。

Lottie 動(dòng)畫(huà)的播放控制，除了常規(guī)的控制，還支持進(jìn)度播放、幀播放。以一個(gè)動(dòng)態(tài)按鈕的切換為例，方便大家理解。

上圖所示為一個(gè)菜單/關(guān)閉按鈕的動(dòng)態(tài)切換。

假設(shè)該按鈕動(dòng)效一共10幀，整個(gè)按鈕切換分為兩部分，第一部分：從菜單切換到關(guān)閉（1-10幀）；第二部分：從關(guān)閉切換到菜單（10-1）。我們可以讓開(kāi)發(fā)通過(guò)以下控制方式，完成我們想要的效果。

按鈕動(dòng)效默認(rèn)顯示第1幀（菜單狀態(tài)），點(diǎn)擊按鈕以后開(kāi)始播放動(dòng)效，動(dòng)效播放到第10幀的時(shí)候停止，并停在第10幀（關(guān)閉狀態(tài)）。

當(dāng)按鈕為關(guān)閉狀態(tài)（第10幀）時(shí)，點(diǎn)擊按鈕以后動(dòng)效從第10幀倒放到第1幀（關(guān)閉狀態(tài)），并停在第1幀（菜單狀態(tài)）。

通過(guò)以上方式就完成了對(duì)一個(gè)動(dòng)效按鈕的控制。而日常工作中我們可以靈活地運(yùn)用多種控制方式。

首先動(dòng)效的觸發(fā)，可以是一次交互事件，比如點(diǎn)擊、滑動(dòng)；也可以是監(jiān)聽(tīng)到了廣播，比如網(wǎng)絡(luò)異常等。

而觸發(fā)以后的動(dòng)效控制也多種多樣，可以從開(kāi)始播放到結(jié)束，也可以進(jìn)行倒放；可以循環(huán)播放某一段動(dòng)效；也可以從某一幀播放到另一幀，或者某一個(gè)時(shí)間點(diǎn)播放到另一個(gè)時(shí)間點(diǎn)；更多的控制方式需要大家在工作中慢慢挖掘。

 

 

五、Lottie支持的AE屬性

Lottie雖然能夠滿足多種場(chǎng)景需要，但是并非支持所有的 AE 效果。設(shè)計(jì)制作時(shí)，需要考慮該效果是否支持。否則，會(huì)導(dǎo)致出錯(cuò)或者所用效果無(wú)法生效。

 

上圖為 Lottie 支持的主要 AE 屬性，此處有刪減掉部分不常用的屬性?？梢源蜷_(kāi)以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文檔中雖然說(shuō)支持漸變，但是會(huì)出錯(cuò)，所以大家在使用矢量圖形時(shí)，請(qǐng)勿使用漸變效果。關(guān)于漸變效果的修復(fù)后續(xù)文章會(huì)提到，官網(wǎng)以后也會(huì)修復(fù)相關(guān)問(wèn)題，但是沒(méi)有確切時(shí)間。

通過(guò)上圖我們可以了解到，Lottie 支持的 AE 屬性基本包含以下幾類：

1、基礎(chǔ)的形狀比如圓形、矩形、星形等，也可以支持鋼筆工具繪制的矢量形狀和從 AI 中導(dǎo)入的矢量圖形。

2、支持位移、大小縮放、透明度、旋轉(zhuǎn)、修剪路徑、蒙版、遮罩這些基礎(chǔ)動(dòng)畫(huà)屬性。

3、支持圖層間建立父子級(jí)關(guān)系（只支持圖層與圖層之間建立，當(dāng)圖層的屬性之間建立父子關(guān)系會(huì)失效，比如 A 圖層可以和 B 圖層建立父子關(guān)系，但是 A 圖層的位移屬性和 B 圖層的位移屬性單獨(dú)建立父子關(guān)系則不生效）。

4、支持速度貝塞爾插值，可以搭配 Flow 插件生成各種緩動(dòng)效果。

5、支持導(dǎo)入圖片。

6、支持時(shí)間拉伸和時(shí)間重映射來(lái)通知時(shí)間和速度。

 

 

六、AE插件安裝與使用

前面已經(jīng)提到 Lottie 是通過(guò) AE 插件 bodymovie 導(dǎo)出 json 文件作為動(dòng)畫(huà)數(shù)據(jù)。接下來(lái)就為大家講解插件的安裝與使用方法。

 

1. 下載bodymovie插件

官方英文插件地址：https://aescripts.com/bodymovin/（文末提供中文漢化版下載地址和詳細(xì)安裝教程）

 

2. 自動(dòng)安裝方法（推薦，簡(jiǎn)單）

下載zxp格式安裝器，下載地址：https://aescripts.com/learn/zxp-installer/，安裝成功后，雙擊步驟 1 中下載的插件即可完成安裝。

 

3. 手動(dòng)安裝方法

如果自動(dòng)安裝失敗，可嘗試手動(dòng)安裝。首先修改 ZXP 文件后綴名為 ZIP，然后解壓縮文件，得到文件夾，將文件夾復(fù)制到以下目錄。

WINDOWS：

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or

C:\AppData\Roaming\Adobe\CEP\extensions

MAC：

/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

您可以打開(kāi)終端并鍵入：

• $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

然后鍵入：

• $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

以確保它被正確復(fù)制類型。

 

4. 安裝后

Windows：轉(zhuǎn)到編輯>首選項(xiàng)>常規(guī)>并選中「允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)」。

Mac：轉(zhuǎn)到Adobe After Effects>首選項(xiàng)>常規(guī)>并選中「允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)」。

 

 

七、動(dòng)效預(yù)覽

為了測(cè)試 json 文件是否能在對(duì)應(yīng)平臺(tái)顯示正常，Lottie 提供了預(yù)覽平臺(tái)。將導(dǎo)出的 json 文件上傳到網(wǎng)站即可預(yù)覽效果，也可以下載相應(yīng) APP 掃碼或者導(dǎo)入 json 文件預(yù)覽。

官方社區(qū)，可以預(yù)覽動(dòng)效和查看其他設(shè)計(jì)師公開(kāi)的動(dòng)效案例（自己上傳的預(yù)覽動(dòng)效不會(huì)被公開(kāi)）：https://lottiefiles.com/

支持在線預(yù)覽json文件的 json test: https://nicolasjengler.github.io/bodymovins-json-tester/dist/

iOS 在 app store 搜索 Lottie 即可下載預(yù)覽軟件，安卓需要在 google play 下載安裝?？紤]到部分朋友無(wú)法使用 google play， 文末提供下載。

 

 

 

 

八、推動(dòng)落地

相信大家看完都有躍躍欲試的想法。但是要實(shí)際應(yīng)用在工作項(xiàng)目中就需要各位設(shè)計(jì)師去推動(dòng)了。其中可能會(huì)面臨一些阻力，比如開(kāi)發(fā)人員的能力水平以及個(gè)人的溝通方式等等問(wèn)題。但是對(duì)于正確的事，只要我們堅(jiān)持去做就會(huì)有結(jié)果的。首先對(duì)于 gif 動(dòng)畫(huà)而言，Lottie 更加輕量，且性能更好，并且不易失真；對(duì)于開(kāi)發(fā)人員自己寫(xiě)動(dòng)效來(lái)說(shuō)，一方面 Lottie 減少了大量動(dòng)效標(biāo)注的時(shí)間，并且可以 100% 還原動(dòng)效，對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)無(wú)需再手動(dòng)寫(xiě)動(dòng)效了。一次部署，終身輕松。相信相關(guān)人員了解以后都會(huì)去支持的。

為了方便開(kāi)發(fā)人員使用，下面列出幾個(gè)使用網(wǎng)站，如果開(kāi)發(fā)人員不知道如何部署和控制動(dòng)效，直接把鏈接扔給他們就行了。

• Lottie官方介紹和開(kāi)發(fā)文檔：http://airbnb.io/lottie/#/README
• York_魚(yú)的lottie介紹和動(dòng)效控制方法詳解：https://www.jianshu.com/p/01f6bb509d54

 

 

九、打包下載鏈接

 

百度網(wǎng)盤(pán)下載：https://pan.baidu.com/s/1gGYmRqaQrZkWtDVcvnRj0A