lottie動畫設計_免異常總結
摘要：
動畫一定要保持簡潔，否則會影響效能，在手機上執行會出現卡頓的情況。
1.1 匯出的向量圖層使用1X一倍圖
sketch等素材匯出到AE時，使用1X 一倍圖（以保證資源最小），在AE中更改資源大小即可
這一部分非常重要，使用一倍圖的assets，在AE中調整最終需要的尺寸。...
動畫一定要保持簡潔，否則會影響效能，在手機上執行會出現卡頓的情況。
1.1 匯出的向量圖層使用1X一倍圖
- sketch等素材匯出到AE時，使用1X 一倍圖（以保證資源最小），在AE中更改資源大小即可
- 這一部分非常重要，使用一倍圖的assets，在AE中調整最終需要的尺寸。而不要用大尺寸的assets。
1.2 儘可能使用【父子關係】parenting
- 原因：複製關鍵幀到相似的圖層上會增加多餘的程式碼
- 如何做：利用空圖層Null layers作為控制圖層，來控制多個有著相同動畫的圖層。具體方法： www.rocketstock.com/blog/how-to…
1.3 儘量保持圖層簡潔，預合成巢狀越少越好
- 對於巢狀關係複雜的動畫（例如一個預合成裡巢狀幾個合成），會對效能產生負面影響。最終執行時，動畫在手機中顯示卡頓。
1.4 儘量少用路徑動畫(path keyframe animations)
- 由於它為每個關鍵幀的每個頂點新增資料，因此佔用的空間最多
- 類似 Antotrace ; wiggler ，會使得你的json檔案非常大，從而影響效能，造成卡頓
1.5 儘量不用alpha遮罩動畫
- 對效能影響很大，會導致實際顯示異常卡頓。因此所有涉及到必須使用蒙版來實現的動畫，不用lottie實現。
- 如果必須要使用alpha遮罩，請儘量使遮罩面積最小。如果蒙版面積過大，會使得動畫卡頓。
- 例子：我在一個掃描動畫中使用了蒙版動畫，在手機中跑起來之後蒙版動畫部分（掃描時蟲子隨著指標滑動而變更顯示範圍）卡頓非常明顯（動畫如下，雖然在如下的預覽中不卡頓，但是跑在手機裡會非常卡）
2. 注意事項
- 重名可能會導致Lottie在處理過程中將相同名字的合成錯認。名字使用中文也可能會導致匯出動畫顯示異常
- 所有的圖層為向量圖層
- 所有的合成儘量以 comp_開頭，儘量使用英文
- 所有的圖層名字儘量使用英文命名
- 所有的合成名字,圖層名字 不要重名
- 如果使用了空圖層Null layer來控制了多個動畫，將 Null layer 可見 且 透明度為0%
3. 匯出
- 輸出全屏動畫。輸出尺寸以最寬螢幕為準。最終在android裝置上用 【centerCrop】居中裁切
4. 不支援內容
4.1 不支援ae效果選單中的任何一項
4.2 不支援表示式（官方賣萌，就假裝他們不存在吧XD）
4.3 不支援混合模式（blend mode）
4.4 不支援圖層效果（layer styles）
- 例如給圖層新增陰影，顏色疊加，描邊等
4.5 對漸變動畫表達不穩定
許多時候涉及到漸變色的動畫，顯示會不正常。如果出現了這種情況
- 4.5.1 檢查預合成是否有重名
- 4.5.2 檢查預合成的命名格式是否是 comp_xxxxx（不要出現中文）
- 4.5.3 有時在bodymovin中漸變色動畫會顯示為黑白的，這有可能是bodymovin本身的預覽問題，以demo的預覽為準。
- 4.5.4 常見不支援內容已經列出，其他部分可以參照表格 * airbnb.io/lottie/supp…