【移动应用开发技术】怎么使用Flutter实现58同城中的加载动画

【移动应用开发技术】怎么使用Flutter实现58同城中的加载动画

这篇文章给大家分享的是有关怎么使用Flutter实现58同城中的加载动画的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。使用Flutter实现58同城中加载动画的过程，先看一下加载动画的效果：动画效果乍看比较复杂，难以看出端倪，其实我们可以先调慢动画的速度，这样能够比较清晰地分析出动画的流程。动画的流程动画由两个圆弧的动效组成，两个圆弧的起始点角度和扫过的弧度随着时间规律变化。仔细观察会发现，两个圆弧的动效其实是一样的，只不过起始位置是不一样的。我们先看下外部大圆弧的运动规律。大圆弧从x轴正方向开始运动，按照动画的运动规律，可以将动画分为三个阶段：第一阶段：圆弧起点的在x轴正方向，终点的角度x轴正方向开始向下逐渐增大，直到终点到达y轴负方向位置，最终圆弧扫过的角度为180度。第二阶段：圆弧扫过的角度保持在180度，起点和终点一起顺时针旋转，直到旋转180度后终点到达x轴正方向。第三阶段：圆弧的终点保持在x轴正方向，起点顺时针旋转，直到起点也到达x轴正方向，此时完成一个完整的动画。接下来继续重复动画的第一阶段，组成一个连贯的动画。分析完动画的流程，思路就很清晰了，我们按照动画流程把动画拆分成三部分，通过对圆弧的起点、终点和扫过角度的变换，组合成一个完整的动画，然后不断地重复，最后就变成了一个加载中的动画效果。接下来开始写代码实现。由于动画是由一个圆弧不断变化组成的，如果使用Android，我们很自然的想到可以使用Canvas来进行圆弧的绘制，然后根据时间的变化不停地重新绘制圆弧，从而实现动画效果。那么在Flutter中是否也存在Canvas呢，答案是肯定的，Flutter和Android一样，也存在Canvas。Flutter中的CanvasFlutter中使用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（具体的参数列表请参考文档和源码，篇幅有限不再一一列出）：drawPoint()drawPoints()drawLine()drawLines()save()restore()save()restore()要绘制动画中的圆弧，应该使用drawArc()方法来实现，这里需要注意的是drawArc()方法的参数：startAngle和sweepAngle的单位是弧度（180度等于π弧度）。具体来看一下Canvas.drawArc()方法的参数列表：

///

rect:

圆弧四周范围所形成的矩形，在本篇中圆弧为圆形，可以使用Rect.fromCircle()确定圆弧的范围

///

startAngle:

圆弧起始点的角度，x轴正方向为0度，按顺时针递增，y轴负方向为90度，以此类推

///

sweepAngle:

圆弧扫过的角度，即圆弧终点所在的角度为startAngle

+

sweepAngle

///

useCenter:

如果为true，圆弧两端会与圆心相连，形成一个扇形，本篇中应为false

///

paint:

画笔，下文中会进行简单介绍

void

drawArc(Rect

rect,

double

startAngle,

double

sweepAngle,

bool

useCenter,

Paint

paint)在Canvas的一系列方法中会发现一个熟悉的名称：Paint，与Android类似，Flutter中的Paint类也是用来描述画笔的。Paint类Paint类位于dart.ui库中，Paint类保存了画笔的颜色、粗细、是否抗锯齿、着色器等属性。下面简单的介绍下几个常用的属性：

Paint

paint

=

Paint()

..color

=

Color(0xFFFF552E)

..strokeWidth

=

2.0

..style

=

PaintingStyle.stroke

..isAntiAlias

=

true

..shader

=

LinearGradient(colors:

[]).createShader(rect)

..strokeCap

=

StrokeCap.round

..strokeJoin

=

StrokeJoin.bevel;属性说明：color：Color类型，设置画笔的颜色。strokeWidth：double类型，设置画笔的粗细。style：PaintingStyle枚举类型，设置画笔的样式，PaintingStyle.stroke为描边，PaintingStyle.fill为填充。isAntiAlias：bool类型，设置是否抗锯齿，true为开启抗锯齿。shader：Shader类型，着色器，一般用来绘制渐变效果，可以使用LinearGradient、RadialGradient、SweepGradient等。strokeCap：StrokeCap枚举类型，设置线条两端点的样式，StrokeCap.butt为无（默认值），StrokeCap.round为圆形，StrokeCap.square为方形。strokeJoin：StrokeJoin枚举类型，设置线条交汇处的样式，StrokeJoin.miter为锐角，StrokeJoin.round为圆弧，StrokeJoin.bevel为斜角，可以参考下图方便理解：熟悉了Canvas和Paint的使用之后，就能够绘制出加载动画的圆弧了。当然，只是绘制出圆弧并没有什么用，主要是怎么让圆弧动起来。Flutter中的动画

想要让圆弧动起来，我们需要使用到Flutter的动画。下面先来介绍下Flutter中动画的实现。

Flutter中的动画相关的类主要有以下几个：

Animation：动画的核心类，是一个抽象类。用来生成动画执行过程中的插值，输出的结果可以是线性或曲线的，Animation对象与UI渲染没有任何关系。

abstract

class

Animation<T>

extends

Listenable

implements

ValueListenable<T>

{

///

添加动画状态的监听

void

addStatusListener(AnimationStatusListener

listener);

///

移除动画状态的监听

void

removeStatusListener(AnimationStatusListener

listener);

///

获取当前动画的状态

AnimationStatus

get

status;

///

获取当前动画的插值，执行动画时需要根据该值进行UI绘制等

T

get

value;

}

AnimationController：动画的管理类，继承自Animation<double>。默认情况下在给定的时间范围内线性生成从0.0到1.0的值。

AnimationController对象需要传递一个vsync参数，它接收一个TickerProvider类型的对象，主要职责是创建Ticker。Flutter应用在启动时会绑定一个SchedulerBinding，可以给每一次屏幕刷新添加回调，Ticker就是通过SchedulerBinding来添加屏幕刷新的回调，当屏幕刷新时，会通知到绑定的Ticker回调。假如动画的UI不在当前屏幕，比如锁屏时，锁屏后屏幕停止刷新，不会通知SchedulerBinding，Ticker也就不会触发，这样就能够防止屏幕外的动画消耗不必要的资源。

class

AnimationController

extends

Animation<double>

with

AnimationEagerListenerMixin,

AnimationLocalListenersMixin,

AnimationLocalStatusListenersMixin

{

///

value：动画的初始值，默认是lowerBound

///

duration：动画执行的时长

///

lowerBound：动画的最小值，默认值为0.0

///

upperBound：动画的最大值，默认值为1.0

///

vsync：可以通过

`with

SingleTickerProviderStateMixin`

传入StatefulWidget对象

AnimationController({

double

value,

this.duration,

this.lowerBound

=

0.0,

this.upperBound

=

1.0,

@required

TickerProvider

vsync,

})

{

_ticker

=

vsync.createTicker(_tick);

}

Ticker

_ticker;

///

Ticker的回调，每次屏幕刷新都会回调

void

_tick(Duration

elapsed)

{

notifyListeners();

}

///

开始播放动画

TickerFuture

forward({

double

from

})

///

反向播放动画

TickerFuture

reverse({

double

from

})

///

设置动画重复执行

TickerFuture

repeat({

double

min,

double

max,

bool

reverse

=

false,

Duration

period

})

///

释放动画资源

void

dispose()

}

CurvedAnimation：非线性动画类，继承自Animation<double>。CurvedAnimation可以使用curve属性指定曲线函数Curve，类似Android动画的插值器，Flutter中已经实现了许多常用的曲线，在Curves类中可以找到，比如Curves.linear、Curves.decelerate、Curves.ease。也可以继承Curve类重写transform()方法来实现自定义的曲线函数。

class

CurvedAnimation

extends

Animation<double>

with

AnimationWithParentMixin<double>

{

///

parent：指定AnimationController对象

///

curve：指定动画的曲线函数

CurvedAnimation({

@required

this.parent,

@required

this.curve,

})

}

abstract

class

Curve

{

///

计算动画执行中`t`点的插值，可以自定义曲线函数

double

transform(double

t)

}

Tween：补间值的生成类，继承自Animatable<T>。

由于AnimationController的值范围默认为0.0到1.0，如果需要不同的范围或数据类型，可以使用Tween指定动画值的范围。Tween不仅能返回double类型的值，还有IntTween、ColorTween、SizeTween等各种返回不同数据类型的子类。

使用Tween对象需要调用animate()方法，传入AnimationController对象，该方法会返回一个Animation，这样就可以获取到动画的插值了。

class

Tween<T

extends

dynamic>

extends

Animatable<T>

{

///

begin：动画的起始值

///

end：动画的结束值

Tween({

this.begin,

this.end

});

///

可以把double类型的动画插值转换成任何类型的值

T

transform(double

t)

///

parent：传入AnimationController对象

///

返回Animation对象，使用Animation.value获取动画当前的插值

Animation<T>

animate(Animation<double>

parent)

}

AnimatedBuilder：用于构建动画的Widget，将动画和要执行动画的Widget关联起来，继承关系为AnimatedBuilder→AnimatedWidget→StatefulWidget。

class

AnimatedBuilder

extends

AnimatedWidget

{

const

AnimatedBuilder({

@required

Listenable

animation,

@required

this.builder,

});

///

typedef

TransitionBuilder

=

Widget

Function(BuildContext

context,

Widget

child);

///

builder是一个函数，返回Widget对象

final

TransitionBuilder

builder;

@override

Widget

build(BuildContext

context)

{

return

builder(context,

child);

}

}

abstract

class

AnimatedWidget

extends

StatefulWidget

{

const

AnimatedWidget({

@required

this.listenable,

});

@protected

Widget

build(BuildContext

context);

@override

_AnimatedState

createState()

=>

_AnimatedState();

}

class

_AnimatedState

extends

State<AnimatedWidget>

{

@override

void

initState()

{

super.initState();

widget.listenable.addListener(_handleChange);

}

@override

void

dispose()

{

widget.listenable.removeListener(_handleChange);

super.dispose();

}

void

_handleChange()

{

setState(()

{

});

}

@override

Widget

build(BuildContext

context)

=>

widget.build(context);

}分析上面列出的源码，AnimatedWidget是一个StatefulWidget。当AnimatedWidget关联的_AnimatedState初始化时，会注册动画的监听函数_handleChange，_handleChange监听函数中又调用了setState()方法，即动画插值每次改变时都会调用build()方法。_AnimatedState.build()方法中又调用了AnimatedWidget.build()方法，在AnimatedBuilder中实现了AnimatedWidget.build()方法：调用属性builder生成Widget，最终实现了动画与Widget的绑定。加载动画的实现了解了Flutter的动画后，再结合之前对加载动画流程的分析，加载动画可分成三个阶段，我们可以依赖Tween类，指定值的范围从0.0到3.0变化，当然也可以只使用AnimationController，指定lowerBound和upperBound的值分别为0.0和3.0。这里之所以不使用CurvedAnimation，是因为加载动画的圆弧是线性变化的，不存在加速减速，没有必要使用。大圆弧能够实现了，我们再来看内部的小圆弧，仔细观察会发现小圆弧的变化规律与大圆弧完全一致，只不过小圆弧的起始位置在x轴负方向，与大圆弧正好相差180度，也就是π弧度。在绘制大圆弧的同时，可以很轻松的计算出小圆弧的起点的角度（即大圆弧起点的角度+π弧度）。至此整个动画的实现思路就清晰了：自定义加载动画的Widget，继承自CustomPaint类。使用AnimationController、Tween创建动画，动画的值范围从0.0到3.0线性变化，并且设置动画重复执行。动画插值每递增1.0代表动画执行的一个阶段。继承CustomPainter类，实现paint()方法绘制圆弧。根据动画的插值判断当前属于动画的哪个阶段，再计算出圆弧的起点、扫过的角度，绘制出两个圆弧。下面是实现加载动画的关键代码：

import

'dart:math';

import

'package:flutter/material.dart';

class

WubaLoadingWidget

extends

StatefulWidget

{

@override

_WubaLoadingWidgetState

createState()

=>

_WubaLoadingWidgetState();

}

class

_WubaLoadingWidgetState

extends

State<WubaLoadingWidget>

with

SingleTickerProviderStateMixin

{

AnimationController

_animationController;

Animation<double>

_animation;

@override

void

initState()

{

super.initState();

_animationController

=

new

AnimationController(

//

可以指定lowerBound、upperBound，使用AnimationController对象

//

lowerBound:

0.0,

//

upperBound:

3.0,

vsync:

this,

duration:

const

Duration(milliseconds:

1500),

);

_animation

=

Tween(begin:

0.0,

end:

3.0)

.animate(_animationController);

_animationController.forward();

//

执行动画

_animationController.repeat();

//

设置动画循环执行

}

@override

void

dispose()

{

//

调用dispose()方法释放动画资源

_animationController.dispose();

super.dispose();

}

@override

Widget

build(BuildContext

context)

{

return

AnimatedBuilder(

animation:

_animationController,

builder:

(BuildContext

context,

Widget

child)

{

return

Container(

child:

CustomPaint(

painter:

_LoadingPaint(

value:

_animation.value,

),

),

);

},

);

}

}

class

_LoadingPaint

extends

CustomPainter

{

final

double

value;

final

Paint

_outerPaint;

//

大圆弧的Paint

final

Paint

_innerPaint;

//

小圆弧的Paint

_LoadingPaint({

this.value,

});

@override

void

paint(Canvas

canvas,

Size

size)

{

dou