前言
參考矢量動畫實現，幀動畫。發現幀動畫中load一系列的資源圖片，創建大量的BitmapDrawable，資源圖片存在重復的元素。這樣不僅浪費了大量的手機內存，占用CPU時間片做計算，而且也無形中增大了App的大小。而安卓的矢量動畫的實現，則擺脫了對位圖的依賴，以描述性語句的形式來實現動畫。但是有些場景下單純用矢量繪圖的方式又顯得格外的復雜。
由此便產生了VenusDrawable，VenusDrawable的具體實現便是：將圖片元素切分，通過將每個元素的繪制路徑 描述出來，在畫布上繪制，實現 位圖動畫。
類似 airbnb 的 lottie ，最近 SVGAPlayer （yyued開源的）。
效果展示
Drawable 實現
VenusDrawable 的實現部分比較簡單，大概的流程圖如下：
整個的實現流程比較簡單，
核心內容是按照幀序列的方式將位圖和矢量圖繪制到View上，系分一下大概分以下幾個部分：
描述數據的格式
使用json這種輕量級的方式來表述，大概的格式如下：
{
"version": "1.0",//版本描述
"count": 60,//總幀數
"size": {//大小
"width": 500,
"height": 500
},
"frames": [
{
"key": "位圖字符或矢量標志",//元素類型
"layout": {//元素大小
"x": 14,
"y": 14
}
"sprites": [
{
"index": 0,//序列為0 的幀
"martix": {/**位圖位置描述或矢量描述**/},
},
......
]
},
......
]
}
其中，若動畫元素中使用到圖片，我們可以將其轉化為字符存儲到描述文件中。
描述數據的序列化和反序列化
單純通過json的方式是可以實現整個流程的，但是json的序列化和反序列化效率不是很高，特別在移動設備上，更加的追求效率，因此VenusDrawable 采用了FlatBuffers 實現序列化和反序列化。
繪制流程實現
將描述文件解析后，傳遞給VenusDrawable，由其中的VenusDrawer 繪制到View上面canvas.drawBitmap，其中VenusValueAnimator控制幀繪制的速率。
AE拓展實現
對AE拓展比較陌生的話，可以看下AE 擴展開發系統教程，實現AE拓展的目的：為了高保真的將動畫效果由設計師直達軟件界面，類似于lottie的一些插件。不僅可以減少開發成本，還可以提高工作效率。
我們需要實現AE拓展大概描述一下：
將設計師設計并輸出的.aep文件轉換成我們能識別的flatbuffers文件結構。帶著這個目的，我們需要完成兩部分工作：
1. 和我們的宿主程序（AE）的交互：通過宿主提供的功能（api接口），將.aep文件拆解，獲取我們所需要的信息。
2. 另一部分則是我們拓展的展現邏輯：寫一個html，使用js做文件的生成操作。
而這兩部分則通過CSInterface.js 聯系在一起。
第一部分可以直接查閱API使用;
第二部分大致流程圖如下：
效率對比
相同條件下，用了兩個小螞蟻的動畫，一個是通過AnimationDrawable 實現，另外一個通過VenusDrawable實現，gc后對比圖如下：
VenusDrawable:
[圖片上傳失敗...(image-a2a13f-1557552400900)]
AnimationDrawable:
[圖片上傳失敗...(image-6f3321-1557552400900)]
對比可發現：相較于AnimationDrawable，VenusDrawable減少了近1m的內存占用。
后續優化
- 在多機型上的兼容性問題，硬件繪制的兼容性問題。
- 增加x元素來影響 動畫的呈現，如手勢，touch 事件等，使動畫更具趣味性。
- 繪制的效率持續調優。
- 支持矢量動畫的繪制
