Flutter實現圓形波浪進度球【canvas+animation】

前言：筆者近期實在太忙，加上想不到很好的能夠編寫的內容（其實插件開發系列只寫了一篇😭），確實鴿了你們很久。接下來個人重心會偏向酷炫UI的實現，把canvas、動畫、Render層玩透先。html

##靈感來源做爲一個前端開發者，遇到動畫特效老是想讓美工輸入json文件，再Lottie加載下，效率性能兩不誤。😄直到那天我看到一個波浪進度球，頓時實在想不出什麼理由能夠糊弄成GIF圖或者json文件，畢竟加載進度徹底是須要代碼精準控制的。der~仍是本身實現玩一玩吧。 ##效果筆者花了週日一整個下午的時間，配着祖傳工夫茶，終於擼出個像樣的傢伙，性能debug環境下都能穩穩保持在60幀左右。查看源代碼點這裏，預覽效果見下圖：前端

##實現步驟我將這個動效分爲3層canvas：圓形背景、圓弧進度條、兩層波浪；3個動畫：圓弧前進動畫、兩層波浪移動的動畫。git

首先繪製圓形背景，很簡單，畫圓便可，這一層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睹爲快：github

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個點，加上兩個閉環點（p六、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，下面的代碼是真正暴露給調用方使用的控件的實現，同時也實現了全部的動畫。web

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 的嵌套是真的噁心，因爲時間比較急，我沒有去查看是否有更好的實現方式，但至少這個實現方法在效果、性能都很是不錯。 json

##寫在最後感謝小夥伴看到了最後，這個進度球已經上傳到我的GitHub，歡迎fork和star；我本週會抽時間繼續優化，抽象出更簡潔的api，而且發佈到pub上；同時也有更加酷炫的UI正在編寫中，我也會盡力抽出空閒時間去編寫更好的文章與你們交流，加油💪🏻~~~canvas

小弟班門弄斧，但願能一塊兒學習進步！！！api