前言
參考矢量動畫實現(xiàn)，幀動畫瘪校。發(fā)現(xiàn)幀動畫中l(wèi)oad一系列的資源圖片，創(chuàng)建大量的BitmapDrawable，資源圖片存在重復(fù)的元素阱扬。這樣不僅浪費了大量的手機內(nèi)存泣懊，占用CPU時間片做計算，而且也無形中增大了App的大小麻惶。而安卓的矢量動畫的實現(xiàn)馍刮，則擺脫了對位圖的依賴，以描述性語句的形式來實現(xiàn)動畫用踩。但是有些場景下單純用矢量繪圖的方式又顯得格外的復(fù)雜渠退。
由此便產(chǎn)生了VenusDrawable，VenusDrawable的具體實現(xiàn)便是：將圖片元素切分脐彩，通過將每個元素的繪制路徑 描述出來碎乃，在畫布上繪制，實現(xiàn) 位圖動畫惠奸。
類似 airbnb 的 lottie 梅誓，最近 SVGAPlayer （yyued開源的）。
效果展示
Drawable 實現(xiàn)
VenusDrawable 的實現(xiàn)部分比較簡單佛南，大概的流程圖如下：
整個的實現(xiàn)流程比較簡單梗掰，
核心內(nèi)容是按照幀序列的方式將位圖和矢量圖繪制到View上，系分一下大概分以下幾個部分：
描述數(shù)據(jù)的格式
使用json這種輕量級的方式來表述嗅回，大概的格式如下：
{
"version": "1.0",//版本描述
"count": 60,//總幀數(shù)
"size": {//大小
"width": 500,
"height": 500
},
"frames": [
{
"key": "位圖字符或矢量標(biāo)志",//元素類型
"layout": {//元素大小
"x": 14,
"y": 14
}
"sprites": [
{
"index": 0,//序列為0 的幀
"martix": {/**位圖位置描述或矢量描述**/},
},
......
]
},
......
]
}
其中及穗，若動畫元素中使用到圖片，我們可以將其轉(zhuǎn)化為字符存儲到描述文件中绵载。
描述數(shù)據(jù)的序列化和反序列化
單純通過json的方式是可以實現(xiàn)整個流程的埂陆，但是json的序列化和反序列化效率不是很高，特別在移動設(shè)備上娃豹，更加的追求效率焚虱，因此VenusDrawable 采用了FlatBuffers 實現(xiàn)序列化和反序列化。
繪制流程實現(xiàn)
將描述文件解析后懂版，傳遞給VenusDrawable鹃栽，由其中的VenusDrawer 繪制到View上面canvas.drawBitmap，其中VenusValueAnimator控制幀繪制的速率躯畴。
AE拓展實現(xiàn)
對AE拓展比較陌生的話民鼓，可以看下AE 擴展開發(fā)系統(tǒng)教程，實現(xiàn)AE拓展的目的：為了高保真的將動畫效果由設(shè)計師直達軟件界面蓬抄，類似于lottie的一些插件摹察。不僅可以減少開發(fā)成本，還可以提高工作效率倡鲸。
我們需要實現(xiàn)AE拓展大概描述一下：
將設(shè)計師設(shè)計并輸出的.aep文件轉(zhuǎn)換成我們能識別的flatbuffers文件結(jié)構(gòu)供嚎。帶著這個目的，我們需要完成兩部分工作：
1. 和我們的宿主程序（AE）的交互：通過宿主提供的功能（api接口），將.aep文件拆解克滴，獲取我們所需要的信息逼争。
2. 另一部分則是我們拓展的展現(xiàn)邏輯：寫一個html，使用js做文件的生成操作劝赔。
而這兩部分則通過CSInterface.js 聯(lián)系在一起誓焦。
第一部分可以直接查閱API使用;
第二部分大致流程圖如下：
效率對比
相同條件下，用了兩個小螞蟻的動畫着帽，一個是通過AnimationDrawable 實現(xiàn)杂伟，另外一個通過VenusDrawable實現(xiàn)，gc后對比圖如下：
VenusDrawable:
[圖片上傳失敗...(image-a2a13f-1557552400900)]
AnimationDrawable:
[圖片上傳失敗...(image-6f3321-1557552400900)]
對比可發(fā)現(xiàn)：相較于AnimationDrawable仍翰，VenusDrawable減少了近1m的內(nèi)存占用赫粥。
后續(xù)優(yōu)化
- 在多機型上的兼容性問題，硬件繪制的兼容性問題予借。
- 增加x元素來影響 動畫的呈現(xiàn)越平，如手勢，touch 事件等灵迫，使動畫更具趣味性秦叛。
- 繪制的效率持續(xù)調(diào)優(yōu)。
- 支持矢量動畫的繪制
