android 序列化drawable,VenusDrawable-以描述文件的方式绘制Bitmap动画

前言

参考矢量动画实现，帧动画。发现帧动画中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 事件等，使动画更具趣味性。

绘制的效率持续调优。

支持矢量动画的绘制

参考