在本篇文章中，给大家分享下笔者使用Flutter实现58同城中加载动画的过程。先看一下加载动画的效果：

 

　　动画效果乍看比较复杂，难以看出端倪，其实我们可以先调慢动画的速度，这样能够比较清晰地分析出动画的流程。

 

　　动画的流程

 

　　动画由两个圆弧的动效组成，两个圆弧的起始点角度和扫过的弧度随着时间规律变化。仔细观察会发现，两个圆弧的动效其实是一样的，只不过起始位置是不一样的。我们先看下外部大圆弧的运动规律。

 

　　大圆弧从x轴正方向开始运动，按照动画的运动规律，可以将动画分为三个阶段：

 

　　第一阶段：圆弧起点的在x轴正方向，终点的角度x轴正方向开始向下逐渐增大，直到终点到达y轴负方向位置，最终圆弧扫过的角度为180度。

 

　　第二阶段：圆弧扫过的角度保持在180度，起点和终点一起顺时针旋转，直到旋转180度后终点到达x轴正方向。

 

　　第三阶段：圆弧的终点保持在x轴正方向，起点顺时针旋转，直到起点也到达x轴正方向，此时完成一个完整的动画。接下来继续重复动画的第一阶段，组成一个连贯的动画。

 

　　分析完动画的流程，思路就很清晰了，我们按照动画流程把动画拆分成三部分，通过对圆弧的起点、终点和扫过角度的变换，组合成一个完整的动画，然后不断地重复，最后就变成了一个加载中的动画效果。

 

　　接下来开始写代码实现。

 

　　由于动画是由一个圆弧不断变化组成的，如果使用Android，我们很自然的想到可以使用Canvas来进行圆弧的绘制，然后根据时间的变化不停地重新绘制圆弧，从而实现动画效果。那么在Flutter中是否也存在Canvas呢，答案是肯定的，Flutter和Android一样，也存在Canvas。

 

　　Flutter中的Canvas

 

　　Flutter中使用 CustomPainter 类在Canvas上进行绘制，该类包含一个 paint（） 方法，该方法提供了一个Canvas对象，可以用来绘制各种图形。

 

　　abstract class CustomPainter extends Listenable {

 

　　void paint（Canvas canvas, Size size）;

 

　　}

 

　　不过在Flutter中一切皆是Widget，而承载Canvas功能的Widget是 CustomPaint 类。 CustomPaint 包含一个painter属性，用来指定进行绘制的 CustomPainter，源码如下：

 

　　class CustomPaint extends SingleChildRenderObjectWidget {

 

　　const CustomPaint（{

 

　　Key key,

 

　　this.painter,

 

　　}）;

 

　　final CustomPainter painter;

 

　　}

 

　　Flutter中的Canvas和Android类似，提供了一系列的API用来绘制点、线、圆形、正方形等，而且API很类似，对比一下Flutter与Android中Canvas的常见API（具体的参数列表请参考文档和源码，篇幅有限不再一一列出）：

 

　　Android

 

　　Flutter

 

　　点

 

　　drawPoint（）

 

　　drawPoints（）

 

　　drawPoints（）

 

　　线

 

　　drawLine（）

 

　　drawLines（）

 

　　drawLine（）

 

　　圆

 

　　drawCircle（）

 

　　drawCircle（）

 

　　椭圆

 

　　drawOval（）

 

　　drawOval（）

 

　　圆弧

 

　　drawArc（）

 

　　drawArc（）

 

　　矩形

 

　　drawRect（）

 

　　drawRect（）

 

　　Path

 

　　drawPath（）

 

　　drawPath（）

 

　　图片

 

　　drawBitmap（）

 

　　drawImage（）

 

　　文字

 

　　drawText（）

 

　　drawParagraph（）

 

　　变换

 

　　save（）

 

　　restore（）

 

　　save（）

 

　　restore（）

 

　　要绘制动画中的圆弧，应该使用 drawArc（） 方法来实现，这里需要注意的是drawArc（）方法的参数：startAngle和sweepAngle的单位是弧度（180度等于π弧度）。