導語
lottie的出現(xiàn)給設計師和開發(fā)帶來了極大的便利。設計師設計的動畫可以百分百還原。但是在使用過程中可能會遇到不少顯示異常或者性能問題，因此結合lottie官方文檔以及我在實踐中遇到的問題做了如下總結:)
Introduction_00_sm.gif
Introduction_03_sm (1).gif
1. 保持簡潔
動畫一定要保持簡潔，否則會影響性能，在手機上運行會出現(xiàn)卡頓的情況。
1.1 導出的矢量圖層使用1X一倍圖
- sketch等素材導出到AE時，使用1X 一倍圖（以保證資源最小），在AE中更改資源大小即可
- 這一部分非常重要，使用一倍圖的assets，在AE中調(diào)整最終需要的尺寸。而不要用大尺寸的assets。
1.2 盡可能使用【父子關系】parenting
- 原因：復制關鍵幀到相似的圖層上會增加多余的代碼
- 如何做：利用空圖層Null layers作為控制圖層，來控制多個有著相同動畫的圖層。具體方法：https://www.rocketstock.com/blog/how-to-use-null-layers-in-after-effects/
1.3 盡量保持圖層簡潔，預合成嵌套越少越好
- 對于嵌套關系復雜的動畫（例如一個預合成里嵌套幾個合成），會對性能產(chǎn)生負面影響。最終運行時，動畫在手機中顯示卡頓。
1.4 盡量少用路徑動畫(path keyframe animations)
- 由于它為每個關鍵幀的每個頂點添加數(shù)據(jù)，因此占用的空間最多????
- 類似 Antotrace ; wiggler ，會使得你的json文件非常大，從而影響性能，造成卡頓?
1.5 盡量不用alpha遮罩動畫
- 對性能影響很大，會導致實際顯示異常卡頓。因此所有涉及到必須使用蒙版來實現(xiàn)的動畫，不用lottie實現(xiàn)。
- 如果必須要使用alpha遮罩，請盡量使遮罩面積最小。如果蒙版面積過大，會使得動畫卡頓。
-
例子：我在一個掃描動畫中使用了蒙版動畫，在手機中跑起來之后蒙版動畫部分（掃描時蟲子隨著指針滑動而變更顯示范圍）卡頓非常明顯（動畫如下，雖然在如下的預覽中不卡頓，但是跑在手機里會非常卡）
殺毒動畫
2. 注意事項
- 重名可能會導致Lottie在處理過程中將相同名字的合成錯認。名字使用中文也可能會導致導出動畫顯示異常
- 所有的圖層為矢量圖層
- 所有的合成盡量以 comp_開頭，盡量使用英文
- 所有的圖層名字盡量使用英文命名
- 所有的合成名字,圖層名字 不要重名
- 如果使用了空圖層Null layer來控制了多個動畫，將 Null layer 可見 且 透明度為0%
3. 導出
- 輸出全屏動畫。輸出尺寸以最寬屏幕為準。最終在android設備上用 【centerCrop】居中裁切
4. 不支持內(nèi)容
4.1 不支持ae效果菜單中的任何一項
4.2 不支持表達式（官方賣萌，就假裝他們不存在吧XD）
lottie官方賣萌.png
4.3 不支持混合模式（blend mode）
4.4 不支持圖層效果（layer styles）
- 例如給圖層添加陰影，顏色疊加，描邊等
4.5 對漸變動畫表達不穩(wěn)定
許多時候涉及到漸變色的動畫，顯示會不正常。如果出現(xiàn)了這種情況
- 4.5.1 檢查預合成是否有重名
- 4.5.2 檢查預合成的命名格式是否是 comp_xxxxx（不要出現(xiàn)中文）
- 4.5.3 有時在bodymovin中漸變色動畫會顯示為黑白的，這有可能是bodymovin本身的預覽問題，以demo的預覽為準。
- 4.5.4 常見不支持內(nèi)容已經(jīng)列出，其他部分可以參照表格
* http://airbnb.io/lottie/supported-features.html
5. 關于插件
5.1 淘汰sketch to ae
- 經(jīng)常會使得矢量圖層變成圖片，會使得漸變圖層變成圖片，導出不穩(wěn)定
5.2 使用AEUX這個插件
- 目前為止比較穩(wěn)定
5.3 預覽
- 使用Lottie app來預覽動畫
參考文章：
* lottie官方文檔 [http://airbnb.io/lottie/#/after-effects
)
6. 相關文章
lottie零基礎入門
免異常總結相當于高級篇了，因此總結了一個零基礎入門版，
這一篇相當于lottie系列的基礎篇，這兩篇結合看一下就會對Lottie有比較系統(tǒng)的了解了。
http://www.lxweimin.com/p/78d1272329ab
