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的内存占用。

后续优化

1. 在多机型上的兼容性问题，硬件绘制的兼容性问题。
2. 增加x元素来影响 动画的呈现，如手势，touch 事件等，使动画更具趣味性。
3. 绘制的效率持续调优。
4. 支持矢量动画的绘制

参考

• Android Vector曲折的兼容之路

• YYUED 动画

• 直播App中Android酷炫礼物动画实现方案（上篇）

• 直播App中Android酷炫礼物动画实现方案（下篇）：SVGA由来与Lottie的对比

• AE 扩展开发系统教程

• SVGA-AEConverter

• FlatBuffer原理与实现

• AEScript