為什么要學(xué)Lottie？

先放已完成lottie動效作品鏈接

https://dribbble.com/shots/6081102-loading

https://dribbble.com/shots/6081102-loading

https://dribbble.com/shots/6075683-Loading

設(shè)計師做出來的動效交給開發(fā)總是實現(xiàn)不了？開發(fā)周期長？開發(fā)成本高？學(xué)習(xí)了Lottie雖然不能解決全部動效的問題，但是類似于下面這樣的效果是不在話下的。Lottie讓不會編程的設(shè)計師可以輸出Json文件，交給開發(fā)分分鐘實現(xiàn)動效。(寫在前面，部分步驟需要科學(xué)上網(wǎng)。)

Lottie的優(yōu)勢

- 開發(fā)無需編寫動畫,只需加載

- Android, iOS, 和React Native多臺支持

- Path,flat等風(fēng)格動畫實現(xiàn)完美

- 可手動設(shè)置進度,綁定手勢,事件等

- 可網(wǎng)絡(luò)加載,動態(tài)控制播放速度等

- 性能好,顯示效果完美

- ...（待補充）

Lottie的劣勢

- 能在AE中實現(xiàn)的效果有限（下文有介紹）

- 對AE使用要求高一點, 動畫更加依賴設(shè)計師

- ...（待補充）

【任何工具其實都有優(yōu)勢和劣勢，我們能做的就是，利用優(yōu)勢，避開劣勢?！?/p>

大家一定會想，輸出Json文件，是不是很難，是不是需要有編程的基礎(chǔ)，但其實我們只要學(xué)會使用AE制作動效，然后安裝一款A(yù)E的插件，導(dǎo)出Json文件，交給開發(fā)人員就可以了。（當(dāng)然，這幾個步驟之間還是會出現(xiàn)很多問題，這些就需要設(shè)計師們在實際工作中去磨練了）

這個就是json文件，打開之后是代碼，需要借助Lottie官方的預(yù)覽網(wǎng)站來查看。

直接把json文件拖到  https://www.lottiefiles.com/preview   這個網(wǎng)站，就可以看啦，也可以用手機端APP來查看。

關(guān)于安裝

Lottie的官方網(wǎng)站有完整的安裝、使用和注意事項的文檔（英文）。   

https://airbnb.io/lottie/    

點開左側(cè) After Effects （有時候需要等一下，看網(wǎng)速快不快）
按照 Getting started的安裝順序安裝（一定要按照順序）

因為考慮到軟件隨時在更新，這里放官網(wǎng)的鏈接 https://airbnb.io/lottie/（科學(xué)上網(wǎng)）。另外，英文比較吃力的同學(xué)可以使用Google游覽器，這個游覽器有個功能是會將英文翻譯成中文，百度可以了解如何使用這個功能。

總的來說，安裝步驟官網(wǎng)寫的很詳細，大家需要做的是，1.科學(xué)上網(wǎng)；2.Google游覽器。另外，國內(nèi)有很多文章也總結(jié)了如何安裝，但是都沒有官網(wǎng)寫的詳細。我如果有空了會翻譯一版給大家（看大家需求大不大）。

個人覺得，安裝軟件不是技術(shù)活，網(wǎng)上很多攻略，所以就給了最官方（最全、最新）的方法。

接下來介紹的就是在使用過程中，我遇到的坑，如果大家遇到了，可以作為參考。

1.在AE中做動效時，必須按照官方文檔里支持的效果來使用。

官方文檔寫到的與AE動效設(shè)計有關(guān)的部分，以下是在各個平臺上支持的效果。

在制作動效之前了解規(guī)則真的非常重要，講到這里大部分的人會說，這么麻煩我不學(xué)了，反正我不是開發(fā)人員，這些本就是開發(fā)應(yīng)該做的事情，和我設(shè)計師有什么關(guān)系呢？如果你這樣想，其實是很危險的，在公司里擁有別人很難替代的技能其實就是提升自我價值（商業(yè)）的方式和手段。

而且，雖然規(guī)則有點多，但是可以實現(xiàn)的動效也是相當(dāng)誘人的。

有打退堂鼓的人可以去這個網(wǎng)站看看。 https://www.lottiefiles.com/popular         

（科學(xué)上網(wǎng)）

2.AE要全英文+最新版的bodymovin（這也是我為什么要推薦去官網(wǎng)下載）。

為什么要AE全英文呢，因為很多設(shè)計師遇到 漸變和彩色的圖導(dǎo)出以后會變成黑白色，之前因為這個問題我查了很多的資料，真的是淚的教訓(xùn)。

3.和開發(fā)提前溝通好，比如要多大的尺寸，幾倍圖等等。

避免一稿多做，最好的辦法就是多溝通！多溝通！多溝通?。ㄖ匾氖虑檎f三遍）

4.多平臺檢查

不僅要在官網(wǎng)的預(yù)覽網(wǎng)站里預(yù)覽，最好各配一部iOS和安卓的手機，下載Lottie 的APP，蘋果很好下載，App Store里就有，安卓的比較麻煩，需要借助科學(xué)上網(wǎng)。我為了下載到安卓的APP，先電腦科學(xué)上網(wǎng)下載了Lottie的安卓APP（谷歌搜 lottie for Android），然后把安裝包微信發(fā)到安卓手機，就可以下載了。

為什么要多平臺檢查？主要是避免之后會出現(xiàn)的一些未知狀況。這個也是切身經(jīng)歷。我認為，在自己負責(zé)的這個環(huán)節(jié)里要將可以考慮到的情況都排查一遍。

5.關(guān)于表達式

雖然lottie不支持表達式，但是在AE中可以將表達式全部轉(zhuǎn)換成關(guān)鍵幀，這樣就可以解決，即想用表達式又可以滿足預(yù)設(shè)條件的情況。（關(guān)于AE如何將表達式轉(zhuǎn)換為關(guān)鍵幀，可百度，）

6.陸續(xù)補充中、、、、、、（歡迎大家來指正）

總結(jié)，職業(yè)邊界越來越模糊，國外的很多設(shè)計師在學(xué)習(xí)設(shè)計的課程中，學(xué)習(xí)編程是必修課。所以，為了提升自己以后的職業(yè)競爭力，不停擴充知識是很有必要的。