Flutter实现圆形波浪进度球【canvas+animation】

前言：笔者近期实在太忙，加上想不到很好的可以编写的内容（其实插件开发系列只写了一篇😭），确实鸽了大家好久。接下来我的重心会偏向酷炫UI的实现，把canvas、动画、Render层玩透先。

灵感来源

作为一个前端开发者，遇到动画特效总是想让美工输入json文件，再Lottie加载下，效率性能两不误。😄直到那天我看到一个波浪进度球，顿时实在想不出什么理由可以糊弄成GIF图或者json文件，毕竟加载进度完全是需要代码精准控制的。der~还是自己实现玩一玩吧。

效果

笔者花了周日一整个下午的时间，配着祖传工夫茶，终于撸出个像样的家伙，性能debug环境下都能稳稳保持在60帧左右。查看源代码点这里，预览效果见下图：效果图

实现步骤

我将这个动效分为3层canvas：圆形背景、圆弧进度条、两层波浪；3个动画：圆弧前进动画、两层波浪移动的动画。

首先绘制圆形背景，很简单，画圆即可，这一层canvas是不需要重新绘制的；

import 'package:flutter/material.dart';

class RoundBasePainter extends CustomPainter {
  final Color color;

  RoundBasePainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..strokeWidth = 7.0
      ..color = color;
    //画进度条圆框背景
    canvas.drawCircle(size.center(Offset.zero), size.width / 2, paint);
    //保存画布状态
    canvas.save();
    //恢复画布状态
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

绘制圆弧进度条，这里需要理解下我们的起点是在-90°开始的，同时需要将进度转化为角度进行圆弧的绘制；

import 'dart:math';

import 'package:flutter/material.dart';

class RoundProgressPainter extends CustomPainter {
  final Color color;
  final double progress;

  RoundProgressPainter(this.color, this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..strokeWidth = 7.0
      ..color = color;
    // 画圆弧
    canvas.drawArc(
        Rect.fromCircle(
            center: size.center(Offset.zero), radius: size.width / 2),
        -pi / 2, // 起点是-90°
        pi * 2 * progress, // 进度*360°
        false,
        paint);
    canvas.save();
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

绘制波浪，这里的原理是：通过贝塞尔曲线实现曲线的，再通过path连接成完整的区域（见图），然后把这块区域通过clip裁剪成圆形即可；代码一dart睹为快：

import 'package:flutter/material.dart';

class WavyPainter extends CustomPainter {
  // 波浪的曲度
  final double waveHeight;
  // 进度 [0-1]
  final double progress;
  // 对波浪区域进行X轴方向的偏移，实现滚动效果
  final double offsetX;

  final Color color;

  WavyPainter(this.progress, this.offsetX, this.color, {this.waveHeight = 24});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.fill
      ..strokeWidth = 1.5
      ..color = color;
    drawWave(canvas, size.center(Offset(0, 0)), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }

  void drawWave(Canvas canvas, Offset center, double radius, Paint paint) {
    // 圆形裁剪
    canvas.save();
    Path clipPath = Path()
      ..addOval(Rect.fromCircle(center: center, radius: radius));
    canvas.clipPath(clipPath);

    // 反向计算点的纵坐标
    double wavePointY = (1 - progress) * radius * 2;

    // point3为中心点，波浪的直径为圆的半径，一共5个点，加上两个闭环点（p6、p7）
    Offset point1 = Offset(center.dx - radius * 3 + offsetX, wavePointY);
    Offset point2 = Offset(center.dx - radius * 2 + offsetX, wavePointY);
    Offset point3 = Offset(center.dx - radius + offsetX, wavePointY);
    Offset point4 = Offset(center.dx + offsetX, wavePointY);
    Offset point5 = Offset(center.dx + radius + offsetX, wavePointY);

    Offset point6 = Offset(point5.dx, center.dy + radius + waveHeight);
    Offset point7 = Offset(point1.dx, center.dy + radius + waveHeight);

    // 贝塞尔曲线控制点
    Offset c1 =
        Offset(center.dx - radius * 2.5 + offsetX, wavePointY + waveHeight);
    Offset c2 =
        Offset(center.dx - radius * 1.5 + offsetX, wavePointY - waveHeight);
    Offset c3 =
        Offset(center.dx - radius * 0.5 + offsetX, wavePointY + waveHeight);
    Offset c4 =
        Offset(center.dx + radius * 0.5 + offsetX, wavePointY - waveHeight);

    // 连接贝塞尔曲线
    Path wavePath = Path()
      ..moveTo(point1.dx, point1.dy)
      ..quadraticBezierTo(c1.dx, c1.dy, point2.dx, point2.dy)
      ..quadraticBezierTo(c2.dx, c2.dy, point3.dx, point3.dy)
      ..quadraticBezierTo(c3.dx, c3.dy, point4.dx, point4.dy)
      ..quadraticBezierTo(c4.dx, c4.dy, point5.dx, point5.dy)
      ..lineTo(point6.dx, point6.dy)
      ..lineTo(point7.dx, point7.dy)
      ..close();

    // 绘制
    canvas.drawPath(wavePath, paint);
    canvas.restore();
  }
}

添加动画。重点讲解下波浪的动画效果，其实就是上面的贝塞尔曲线区域，进行X轴方向的重复匀速移动，加上贝塞尔曲线的效果，就可以产生上下起伏的波浪效果。且通过下图，可以确定平移的距离是圆形的直径。笔者创建的是package，下面的代码是真正暴露给调用方使用的控件的实现，同时也实现了所有的动画。

library round_wavy_progress;

import 'package:flutter/material.dart';
import 'package:round_wavy_progress/painter/round_base_painter.dart';
import 'package:round_wavy_progress/painter/round_progress_painter.dart';
import 'package:round_wavy_progress/painter/wavy_painter.dart';
import 'package:round_wavy_progress/progress_controller.dart';

class RoundWavyProgress extends StatefulWidget {
  RoundWavyProgress(this.progress, this.radius, this.controller,
      {Key? key,
      this.mainColor,
      this.secondaryColor,
      this.roundSideColor = Colors.grey,
      this.roundProgressColor = Colors.white})
      : super(key: key);

  final double progress;
  final double radius;
  final ProgressController controller;
  final Color? mainColor;
  final Color? secondaryColor;
  final Color roundSideColor;
  final Color roundProgressColor;

  @override
  _RoundWavyProgressState createState() => _RoundWavyProgressState();
}

class _RoundWavyProgressState extends State<RoundWavyProgress>
    with TickerProviderStateMixin {
  late AnimationController wareController;
  late AnimationController mainController;
  late AnimationController secondController;

  late Animation<double> waveAnimation;
  late Animation<double> mainAnimation;
  late Animation<double> secondAnimation;

  double currentProgress = 0.0;

  @override
  void initState() {
    super.initState();
    widget.controller.stream.listen((event) {
      print(event);
      wareController.reset();
      waveAnimation = Tween(begin: currentProgress, end: event as double)
          .animate(wareController);
      currentProgress = event;
      wareController.forward();
    });

    wareController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1200),
    );

    mainController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 3200),
    );

    secondController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1800),
    );

    waveAnimation = Tween(begin: currentProgress, end: widget.progress)
        .animate(wareController);
    mainAnimation =
        Tween(begin: 0.0, end: widget.radius * 2).animate(mainController);
    secondAnimation =
        Tween(begin: widget.radius * 2, end: 0.0).animate(secondController);

    wareController.forward();
    mainController.repeat();
    secondController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final viewportSize = Size(constraints.maxWidth, constraints.maxHeight);
      return AnimatedBuilder(
          animation: mainAnimation,
          builder: (BuildContext ctx, Widget? child) {
            return AnimatedBuilder(
                animation: secondAnimation,
                builder: (BuildContext ctx, Widget? child) {
                  return AnimatedBuilder(
                      animation: waveAnimation,
                      builder: (BuildContext ctx, Widget? child) {
                        return Stack(
                          children: [
                            RepaintBoundary(
                              child: CustomPaint(
                                size: viewportSize,
                                painter: WavyPainter(
                                    waveAnimation.value,
                                    mainAnimation.value,
                                    widget.mainColor ??
                                        Theme.of(context).primaryColor),
                                child: RepaintBoundary(
                                  child: CustomPaint(
                                    size: viewportSize,
                                    painter: WavyPainter(
                                        waveAnimation.value,
                                        secondAnimation.value,
                                        widget.secondaryColor ??
                                            Theme.of(context)
                                                .primaryColor
                                                .withOpacity(0.5)),
                                    child: RepaintBoundary(
                                      child: CustomPaint(
                                        size: viewportSize,
                                        painter: RoundBasePainter(
                                            widget.roundSideColor),
                                        child: RepaintBoundary(
                                          child: CustomPaint(
                                            size: viewportSize,
                                            painter: RoundProgressPainter(
                                                widget.roundProgressColor,
                                                waveAnimation.value),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Align(
                              alignment: Alignment.center,
                              child: Text(
                                '${(waveAnimation.value * 100).toStringAsFixed(2)}%',
                                style: TextStyle(
                                    fontSize: 18,
                                    color: widget.roundProgressColor,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ],
                        );
                      });
                });
          });
    });
  }
}

这里代码也不细讲，没什么难度。主要跟大家说一下RepaintBoundary的好处，使用这个控件包裹下，可以控制其较小颗粒度的重绘。（具体不扩展，有需要请查看：pub.flutter-io.cn/documentati… 同时，这里AnimatedBuilder 的嵌套是真的恶心，由于时间比较急，我没有去查看是否有更好的实现方式，但至少这个实现方法在效果、性能都非常不错。性能还是不错的

写在最后

感谢小伙伴看到了最后，这个进度球已经上传到个人GitHub，欢迎fork和star；我本周会抽时间继续优化，抽象出更简洁的api，并且发布到pub上；同时也有更加酷炫的UI正在编写中，我也会尽力抽出空闲时间去编写更好的文章与大家交流，加油💪🏻~~~

小弟班门弄斧，希望能一起学习进步！！！