Flutter 中如何绘制动画

前言

本文分享下自定义完成动画的实现方法，最终的效果图如下

首先是绘图

在Flutter中绘图非常简单。关键词CustomPainter, CustomPaint, Canvas。

在iOS/Android中我们继承UIView/View重写draw/onDraw方法在里面执行画图操作。在Flutter中稍微有点不一样，我们使用CustomPaint(这是一个widget)，它需要一个参数painter，这个参数的类型是一个抽象类CustomPainter。我们需要实现这个类的两个关键方法: paint,shouldRepaint。画什么就由paint决定，而只有shouldRepaint返回true的时候才会重绘。

实现void paint(Canvas canvas, Size size)这个方法，在iOS中我们使用UIBezierPath和Core Graphics绘图，在Flutter具体的绘制方法用这个canvas, 具体的API可以查看官方文档

下面这个例子就是画一段圆弧

class DemoPainter extends CustomPainter {
  final double _arcStart;
  final double _arcSweep;

  DemoPainter(this._arcStart, this._arcSweep);

  @override
  void paint(Canvas canvas, Size size) {
    double side = math.min(size.width, size.height);
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;
    canvas.drawArc(
        Offset.zero & Size(side, side), _arcStart, _arcSweep, false, paint);
  }

  @override
  bool shouldRepaint(DemoPainter other) {
    return _arcStart != other._arcStart || _arcSweep != other._arcSweep;
  }
}

使用的时候把DemoPainter的实例当做参数传给CustomPaint就可以使用了，比如

Container(
  child: CustomPaint(painter: DemoPainter(0.0, math.pi)),
  height: 200.0,
  width: 200.0,
  color: Colors.deepOrange,
  padding: EdgeInsets.all(30.0),
)

显示效果

然后加动画

Flutter的动画也不复杂，关键词AnimationController。

Flutter中的动画是基于Animation，这个对象本身是一个抽象类，在一段时间内依次产生一些值。我们使用封装好的AnimationController来做动画，它在屏幕刷新的每一帧，产生一个新的值，默认情况是在给定的时间段内线性的生成0.0到1.0的数字。

AnimationController有个参数vsync 可以绑定到一个widget(需要widget扩展SingleTickerProviderStateMixin)，当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行。duration属性可以设置持续时间。还有一些方法可以控制动画forward启动,reverse反转,repeat重复。

AnimationController有addListener和addStatusListener方法可以添加监听，一个是值监听一个是状态监听。值监听常用在调用setState来触发UI重建来实现动画，状态监听用在动画状态变化的时候执行一些方法，比如在动画结束时反转动画。

至此我们已经可以绘制动画了，代码如下

class DemoWidget extends StatefulWidget {
  @override
  _DemoWidgetState createState() => _DemoWidgetState();
}

class _DemoWidgetState extends State<DemoWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1500))
          ..repeat()
          ..addListener(() {
            setState(() {});
          });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: DemoPainter(0.0, _controller.value * math.pi * 2),
    );
  }
}

可以借助AnimatedBuilder改写上文的initState和build方法，使视图层级更加清楚，有助于封装

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1500))
          ..repeat();
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(animation: _controller, builder: (context, child) {
      return CustomPaint(
        painter: DemoPainter(0.0, _controller.value * math.pi * 2),
      );
    });
  }

Tween与Curve

Tween和Curve可以帮我们更好地控制Animation的值一般的Animation会在给定的时间内线性的产生0.0到1.0的值

Tween可以把这些转变成我们想要的类型或者是范围比如Tween(begin: math.pi * 1.5, end: math.pi * 1.5 + math.pi * 2).evaluate(_controller),就可以把值的范围转成1.5pi到3.5pi。

Curve是一个抽象类表示生成值的曲线, Curves已经定义了许多常用的曲线。

这里Tween,Curve可以使用chain,evaluate,transform和Animation串起来使用

我们可以使用这些更改我们上文的例子，代码如下

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return CustomPaint(
            painter: DemoPainter(
              Tween(begin: math.pi * 1.5, end: math.pi * 3.5)
                  .chain(CurveTween(curve: Interval(0.5, 1.0)))
                  .evaluate(_controller),
              math.sin(Tween(begin: 0.0, end: math.pi).evaluate(_controller)) *
                  math.pi,
            ),
          );
        });
  }

当然这里第二个参数有更简洁的写法

  math.sin(_controller.value*math.pi) *math.pi

显示效果

本文版权属于再惠研发团队，欢迎转载，转载请保留出处。@白尔摩斯