前言：笔者近期实在太忙，加上想不到很好的可以编写的内容（其实插件开发系列只写了一篇），确实鸽了大家好久。接下来我的重心会偏向酷炫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裁剪成圆形即可；
实际上波浪的区域
代码一睹为快：
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的好处，使用这个控件包裹下，可以控制其较小颗粒度的重绘。（具体不扩展，有需要请查看：https://pub.flutter-io.cn/documentation/flutter_for_web/latest/widgets/RepaintBoundary-class.html）
同时，这里AnimatedBuilder 的嵌套是真的恶心，由于时间比较急，我没有去查看是否有更好的实现方式，但至少这个实现方法在效果、性能都非常不错。
性能还是不错的
写在最后
感谢小伙伴看到了最后，这个进度球已经上传到个人GitHub，欢迎fork和star；我本周会抽时间继续优化，抽象出更简洁的api，并且发布到pub上；
同时也有更加酷炫的UI正在编写中，我也会尽力抽出空闲时间去编写更好的文章与大家交流，加油~~~
小弟班门弄斧，希望能一起学习进步！！！
