前言
参考矢量动画实现，帧动画。发现帧动画中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 实现序列化和反序列化。
i效率对比
绘制流程实现
VenusDrawable 实现
将描述文件解析后，传递给VenusDrawable，由其中的VenusDrawer 绘制到View上面canvas.drawBitmap，其中VenusValueAnimator控制帧绘制的速率。
AE拓展实现
对AE拓展比较陌生的话，可以看下AE 扩展开发系统教程，实现AE拓展的目的：为了高保真的将动画效果由设计师直达软件界面，类似于lottie的一些插件。不仅可以减少开发成本，还可以提高工作效率。
CEP 架构
我们需要实现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 事件等，使动画更具趣味性。
- 绘制的效率持续调优。
- 支持矢量动画的绘制
网友评论