Fish-Lottie：纯Dart如何实现一个高性能动画框架？

背景

Lottie是一个由Airbnb开源的横跨Android，iOS，Web等多端的一个动画方案，它以JSON的方式解决了开发者对复杂动画实现的开发成本问题。

众所周知，闲鱼团队是比较早在客户端侧选择Flutter方案的技术团队,当前的闲鱼工程里也包含很多的Flutter界面。  而官方却一直没有提供Lottie-Flutter方案，当前也有一些第三方开发者提供了相关实现方案，基本上分为两种：

• 在Native端进行数据解析和渲染，再使用桥接的方式把渲染数据传输到Flutter端进行显示。

• 在Flutter直接进行数据解析和使用Flutter绘图能力进行渲染显示。

不过当前已经开源的方案都存在一些问题，前者会在性能和显示存在一些问题，例如显示闪烁白屏。后者在一些能力支持上存在一些功能缺陷，例如不支持文本动画等。所以这一直是闲鱼团队乃至整个Flutter开发者团体的一个痛点。

项目架构

闲鱼团队在调研了官方开源的lottie-android库之后，发现不管是数据解析能力，还是图形绘制能力。Flutter都提供了媲美Android的实现方案。所以参考lottie-android库实现了一个功能完备，性能优异的纯Dart Package来提供Flutter上的Lottie动画支持。

如上图所示，整个项目由基础模块，接口层和控件层构成，然后支持矢量图形，填充描边等能力，详情可见Lottie支持能力，支持的能力也和lottie-android大致相同。

基础模块

基础模块是与FlutterSDK提供的各种能力直接交互的地方，主要分为数据模型模块，动画绘制模块，数据解析模块和工具模块。首先对于整个框架来说，我们首先可以拿到包含整个动画信息的JSON文件，所以需要先经过我们的数据解析模块，把JSON文件里面包含的数据和信息解析并传递给数据模型模块，动画绘制模块负责拿到数据模型模块里的对象之后，调用Flutter提供的绘图能力来进行图形的绘制，而工具模块就主要负责获取屏幕信息，字符串处理，日志打印等工具类能力。

接口层

接口层主要负责JSON数据的输入和动画绘制控制和调用，JSON信息经过数据解析模块最终会生成一个LottieComposition对象，这个对象里承载着整个JSON的动画信息。然后将这个对象传递给LottieDrawable，然后LottieDrawable会把对象传递传递给动画绘制模块，这样动画绘制模块就可以拿到动画信息，然后LottieDrawable再调用动画绘制模块来进行动画的绘制和刷新。

组件层

组件层，这里主要是我们继承Flutter的Widget实现的自定义组件，也是框架暴露给开发者的接口。开发者只需要新建一个LottieAnimationView，并把JSON文件的路径传递给它，支持Asset，Url，File三种形式,然后再把LottieAnimationView像一个普通Widget放到FlutterUI里，就可以完成一个简单的Lottie动画播放器了，当然也会暴露动画的控制接口以及控件的布局接口，只需要在新建LottieAnimationView的时候传入AnimationController，width，height，alignment等属性就可以完成对动画的进一步定制。

工作流程

整体思路

设计师在使用AE制作一段动画时，这个动画其实是由不同的图层组成的，AE提供了多个图层供设计师选择，例如纯色层（通常当做背景）、形状层（绘制各种矢量图形）、文本层、图片层等，每一个图层都可以设置平移、旋转、放缩等变换。每个图层可能又包含多个元素，例如形状图层可能由多个基本矢量图形和钢笔路径图形组合成为一个具有设计感的图案，每个元素也可能包含自己的变换，除了基础变换之外，还可以设置颜色、形状这样的变换。以上图层和元素的动画就组成了一个完整的动画。

如上图所示，我们在AE中新建了一个纯色图层并填充上蓝色，然后新建了一个形状图层，并给这个形状图层添加了一个位移动画（即给形状图层1变换中的位置设置两个关键帧，并在关键帧上设置初始值和最终值），然后在形状图层中添加一个矩形路径和一个黄色的填充，然后同样的方法给矩形的大小和圆度设置动画，不过大小的关键帧为0秒到3秒，圆度的关键帧为3秒到5秒。所以就完成了一个矩形从左到右的同时，先变大然后变为圆形的动画。然后我们通过Lottie提供的BodyMovin插件将以上的动画导出为JSON格式的文件，这个JSON文件里就包含了刚刚我们的所有绘制和关键帧信息。

如上图所示，拿到这个J