自定义一个水波进度球
最终样式：
图片发自简书App
1.自定义View
在Flutter中自定义View需要继承CustomPainter控件,需要实现两个方法：
void paint(Canvas canvas, Size size)以及bool shouldRepaint(CustomPainter oldDelegate),重要的方法当然就是前者，如何在画布上画出我们想要的图案；
至于CusetomPainter控件的使用如下：
Container(
width: 200.0,
height: 200.0,
child: new WavePainter(),
),
2.绘制波浪
绘制波浪的原理其实很简单，重点就是使用path贝塞尔曲线的使用，绘制如下：
Path path = new Path()
..moveTo(waveCenter.dx - width, waveCenter.dy)
..lineTo(waveCenter.dx - width, center.dy + height / 2)
..lineTo(waveCenter.dx + width, center.dy + height / 2)
..lineTo(waveCenter.dx + width, waveCenter.dy);
..quadraticBezierTo(
waveCenter.dx +
width*3/4,
waveCenter.dy + waveHeight,
waveCenter.dx +
width * 1/2,
waveCenter.dy)
..quadraticBezierTo(
waveCenter.dx +
width*1/4,
waveCenter.dy - waveHeight,
waveCenter.dx,
waveCenter.dy)
..quadraticBezierTo(
waveCenter.dx -
width*1/4,
waveCenter.dy + waveHeight,
waveCenter.dx -
width * 1/2,
waveCenter.dy)
..quadraticBezierTo(
waveCenter.dx -
width*3/4,
waveCenter.dy - waveHeight,
waveCenter.dx -
width,
waveCenter.dy);
然后使用canvas进行绘制：
canvas.drawPath(path, paint);
图片发自简书App
这里其实绘制了两段重复的波浪，然后在后面使用一个动画让它向右平移width的宽度，然后重复动画，这样在给定的视野框中就像是波浪一直向右滚动。
这里我们需要在波浪外套上一层圆形，然后让圆形内的波浪显示，而圆形外的波浪隐藏，就使用到了paint的blendMode属性，这个属性的值有很多种，兄弟们自行了解，这里使用到的如下：
paint..blendMode = BlendMode.srcATop
具体代码如下：
var paint = new Paint()
..color = circleBackgroundColor
..style = PaintingStyle.fill;
canvas.drawCircle(center, min(width, height) / 2, paint);
paint
..blendMode = BlendMode.srcATop
..style = PaintingStyle.fill
..strokeWidth = 2.0;
canvas.drawPath(paint, paint);
图片发自简书App
然后我们可以在中加入一个显示进度的文字，使用TextPainter进行绘制：
TextPainter tp = TextPainter(
text: TextSpan(
text: '${(yAnimValue * 100.0).toStringAsFixed(0)}%',
style: textStyle),
textDirection: TextDirection.rtl)
..layout();
tp.paint(
canvas, Offset(center.dx - tp.width / 2, center.dy - tp.height / 2));
3.加入进度功能
加入进度的功能也就是为了能让波浪能够由下至上填满，和波浪平移一样，这里给一个动画：
yController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 500));
yAnimation = new Tween(begin: 0.0, end: 1.0).animate(yController);
yAnimation.addListener(_onProgressChange);
yAnimation.addStatusListener(_onProgressStatusChange);
void _onProgressChange() {
setState(() {
curProgress = yAnimation.value;
});
}
void _onProgressStatusChange(status) {
if (status == AnimationStatus.completed) {
onProgressChange();
}
}
让后让波浪的高度由这个动画数值来控制，这里刷新的远离就是当动画数值变化的时候，调用StatefulWidget的setState({})进行界面刷新。
4.波浪特效
对于滚动的波浪我们可以加入以下特效：
paint..maskFilter = MaskFilter.blur(BlurStyle.inner, 10.0)
通过maskFilter属性我们可以设置绘制区域高斯模糊，这里设置强度为10.0，方向为向内
对于显示的文字我们也加入特效：
TextStyle(
fontSize: 60.0,
foreground: Paint()
..color = Colors.lightBlue
..style = PaintingStyle.fill
..strokeWidth = 2.0
..blendMode = BlendMode.difference
..colorFilter = ColorFilter.mode(Colors.white, BlendMode.exclusion)
..maskFilter = MaskFilter.blur(BlurStyle.solid, 1.0),
fontWeight: FontWeight.bold,
),
blendMode表示绘制有重叠的区域颜色区别处理，然后colorFilter表示对绘制的颜色与白色进行混色，就可以做出，波浪经过的时候文字水中与不在水中的部分有不同的颜色。
