续上篇,再用贝塞尔曲线绘制一个循环水波纹,一个水波纹进度球,先看效果,以下效果的实现用的都是二阶贝塞尔曲线。

效果图

bezierShow4.gif

bezierShow3.gif

我们先实现简单的循环水波纹绘制,我们可以经常见到当手持长绳或上下或左右挥舞绳子,都会产生波形路径,此时如果我们有黑幕遮住
绳子两端只留下绳子中间的波形部分,就可得到一段无限循环的波形图,前提是一直在抖动绳子。。。

循环水波纹

实现分析

先看一下下图,下图也表述了上述场景。

bezier2.jpeg

综上所述,只要屏幕内的波形够多,只要控制住offset的偏移量,无限循环,就能得到我们所想要的波形。

不封闭的循环波

bezierShow4_2.gif

图3 _waveCount 不够的封闭循环波

bezierShow4_1.gif

关键代码

@overridevoid paint(Canvas canvas, Size size) {  // TODO: implement paint  _screenHeight = size.height; //屏幕高,这里不是一直成立,像当有Center 父控件的时候就不成立  _screenWidth = size.width; //屏幕宽  _waveCount = (_screenWidth / waveLength)      .round()+2; //根据波长算出波的个数,这里的波浪个数多一点,这样可以在屏幕内看到更完整的波浪  _centerY = _screenHeight / 2; //中心高度的值  _path.moveTo(      -waveLength + this.myOffsetX, _centerY); //把画笔的起点移到屏幕外的一个波长处,Y轴在屏幕中间  //this.myOffsetX水平方向的偏移量  for (int i = 0; i < _waveCount; i++) {    canvas.save();    canvas.restore();    //绘制波谷,控制点在(-3M/4,_centerY),结束点在(-waveLength / 2,_centerY)    //此处可以先把(waveLength * i) + this.myOffsetX 这段代码移除,所画的就是一个波谷,屏幕外的波谷    _path.quadraticBezierTo(        -waveLength / 4 * 3 + (waveLength * i) + this.myOffsetX,        _centerY + _waveHeight,        -waveLength / 2 + (waveLength * i) + this.myOffsetX,        _centerY);    //绘制波峰,控制点在(-M/4,_centerY),结束点在(0,_centerY)    //此处可以先把(waveLength * i) + this.myOffsetX 这段代码移除,所画的就是一个波峰,屏幕外的波峰    _path.quadraticBezierTo(        -waveLength / 4 + (waveLength * i) + this.myOffsetX,        _centerY - _waveHeight,        0 + waveLength * i + this.myOffsetX,        _centerY);    canvas.drawPath(_path, _whitePaint); //绘制  }  ///封闭绘制区域,构成“深水面”  _path.lineTo(_screenWidth, _screenHeight); //将画笔从当前位置画到屏幕最右下角  _path.lineTo(0, _screenHeight); //画到屏幕左下角  _path.close();  canvas.drawPath(_path, _pathPaint);}

水波纹进度球

在上面的基础上，在加了一个竖直方向变化的偏移量_progressY;还有就是之前是方形的,现在变成圆形,方形变圆形只要
把整个画布裁剪成圆的即可。

没有裁剪画布成圆的图

bezierShow3_1.gif

关键代码

@overridevoid paint(Canvas canvas, Size size) {  // TODO: implement paint  //centerOffset圆心  _path.addArc(Rect.fromCircle(center: centerOffset, radius: r), 0, 360);  canvas.clipPath(_path); //把画布裁剪成一个圆形,这样怎么画都是圆。  canvas.drawCircle(centerOffset, r, _pointPaint); //画圆  _path.reset(); //重置路径  //this.progress的范围是0-100。  _progressY = centerOffset.dy + (r - r / 50 * this.progress); //算出Y点的坐标  //将画笔移动至屏幕外  _path.moveTo(-waveLength + moveX, _progressY);  //这里的波峰波谷稍微多点,所以waveCount*2  for (int i = 0; i < waveCount * 2; i++) {    canvas.save();    canvas.restore();    //绘制波谷,同上    _path.quadraticBezierTo(        -waveLength / 4 * 3 + (waveLength * i) + moveX,        _progressY + waveHeight,        -waveLength / 2 + (waveLength * i) + moveX,        _progressY);    //绘制波峰,同上    _path.quadraticBezierTo(-waveLength / 4 + (waveLength * i) + moveX,        _progressY - waveHeight, 0 + waveLength * i + moveX, _progressY);  }  print("_moveX=${moveX.toString()}");  //封闭圆  _path.moveTo(centerOffset.dx + r, _progressY);  _path.lineTo(centerOffset.dx + r, centerOffset.dy + r);  _path.lineTo(centerOffset.dx - r, centerOffset.dy + r);  _path.lineTo(centerOffset.dx - r, _progressY);  _path.close();  canvas.drawPath(_path, _pathPaint);}

完整代码

Screen类的代码在前面时钟绘制一篇有,要在程序启动的时候调用init初始化。

///贝塞尔曲线示例二class CustomBezierWidget1 extends StatefulWidget {  @override  _CustomBezierWidget1State createState() => _CustomBezierWidget1State();}class _CustomBezierWidget1State extends State<CustomBezierWidget1>    with SingleTickerProviderStateMixin {  AnimationController animationController;  Animation<double> animation;  final double _waveLength = 300; //波浪长  @override  void initState() {    // TODO: implement initState    super.initState();    animationController = new AnimationController(        vsync: this, duration: Duration(milliseconds: 600));    animation = Tween<double>(begin: 0, end: 300).animate(animationController)      ..addListener(() {        setState(() {});      });    animationController.repeat();  }  @override  void deactivate() {    // TODO: implement deactivate    super.deactivate();    animationController.stop();  }  @override  void dispose() {    // TODO: implement dispose    super.dispose();    animationController.dispose();  }  @override  Widget build(BuildContext context) {    return CustomPaint(      painter: BezierPainter1(animation.value, _waveLength),    );  }}class BezierPainter1 extends CustomPainter {  final double myOffsetX; //平移量  final int _waveHeight = 30; //波浪高  final double waveLength; //一个波浪的长度  Paint _pointPaint; //点画笔  Paint _pathPaint; //线画笔  Paint _whitePaint; //空白画笔  double _screenHeight; //屏幕高  double _screenWidth; //屏幕宽  double _centerY; //屏幕中间Y坐标  int _waveCount; //波浪个数  Path _path = Path(); //路径  BezierPainter1(this.myOffsetX, this.waveLength) {    _pointPaint = Paint()      ..color = Colors.teal      ..strokeWidth = 4      ..isAntiAlias = true      ..style = PaintingStyle.fill;    _pathPaint = Paint()      ..color = Colors.deepOrange      ..style = PaintingStyle.fill      ..isAntiAlias = true      ..strokeWidth = 1;    _whitePaint = Paint()      ..color = Colors.white      ..style = PaintingStyle.fill      ..isAntiAlias = true      ..strokeWidth = 1;  }  @override  void paint(Canvas canvas, Size size) {    // TODO: implement paint    _screenHeight = size.height; //屏幕高,这里不是一直成立,像当有Center 父控件的时候就不成立    _screenWidth = size.width; //屏幕宽    _waveCount = (_screenWidth / waveLength)        .round()+2; //根据波长算出波的个数,这里的波浪个数多一点,这样可以在屏幕内看到更完整的波浪    _centerY = _screenHeight / 2; //中心高度的值    _path.moveTo(        -waveLength + this.myOffsetX, _centerY); //把画笔的起点移到屏幕外的一个波长处,Y轴在屏幕中间    //this.myOffsetX水平方向的偏移量    for (int i = 0; i < _waveCount; i++) {      canvas.save();      canvas.restore();      //绘制波谷,控制点在(-3M/4,_centerY),结束点在(-waveLength / 2,_centerY)      //此处可以先把(waveLength * i) + this.myOffsetX 这段代码移除,所画的就是一个波谷,屏幕外的波谷      _path.quadraticBezierTo(          -waveLength / 4 * 3 + (waveLength * i) + this.myOffsetX,          _centerY + _waveHeight,          -waveLength / 2 + (waveLength * i) + this.myOffsetX,          _centerY);      //绘制波峰,控制点在(-M/4,_centerY),结束点在(0,_centerY)      //此处可以先把(waveLength * i) + this.myOffsetX 这段代码移除,所画的就是一个波峰,屏幕外的波峰      _path.quadraticBezierTo(          -waveLength / 4 + (waveLength * i) + this.myOffsetX,          _centerY - _waveHeight,          0 + waveLength * i + this.myOffsetX,          _centerY);      canvas.drawPath(_path, _whitePaint); //绘制    }    ///封闭绘制区域,构成“深水面”    _path.lineTo(_screenWidth, _screenHeight); //将画笔从当前位置画到屏幕最右下角    _path.lineTo(0, _screenHeight); //画到屏幕左下角    _path.close();    canvas.drawPath(_path, _pathPaint);  }  @override  bool shouldRepaint(CustomPainter oldDelegate) {    // TODO: implement shouldRepaint    return true;  }}/// 贝塞尔曲线示例三class WidgetCircleProgressWidget extends StatefulWidget {  @override  _WidgetCircleProgressWidgetState createState() =>      _WidgetCircleProgressWidgetState();}class _WidgetCircleProgressWidgetState    extends State<WidgetCircleProgressWidget> {  Timer timer;  double progress = 0;  bool flag = false;  @override  void initState() {    // TODO: implement initState    super.initState();    timer = Timer.periodic(Duration(milliseconds: 500), (timer) {      setState(() {        if (flag) {          progress = progress - 1;        } else {          progress = progress + 1;        }        if (progress == 0) {          flag = false;        }        if (progress == 100) flag = true;      });    });  }  @override  void dispose() {    // TODO: implement dispose    super.dispose();    timer.cancel();  }  @override  Widget build(BuildContext context) {    return CustomBezierWidget2(progress);  }}class CustomBezierWidget2 extends StatefulWidget {  final double progress;  CustomBezierWidget2(this.progress);  @override  _CustomBezierWidget2State createState() => _CustomBezierWidget2State();}class _CustomBezierWidget2State extends State<CustomBezierWidget2>    with SingleTickerProviderStateMixin {  AnimationController _animationController;  Animation<double> _animationTranslate;  double _moveX; //移动的X,此处变化一个波长  double _r; //半径  double waveLength; //波长  double _waveCount = 2;  @override  void initState() {    // TODO: implement initState    super.initState();    _r = Screen.screenWidthDp / 3;    waveLength = 2 * _r / _waveCount;    _animationController =        new AnimationController(vsync: this, duration: Duration(seconds: 1));    _animationTranslate =        Tween<double>(begin: 0, end: waveLength).animate(_animationController)          ..addListener(() {            setState(() {});          });    _animationController.repeat();  }  @override  void deactivate() {    // TODO: implement deactivate    super.deactivate();    _animationController.stop();  }  @override  void dispose() {    // TODO: implement dispose    super.dispose();    _animationController.dispose();  }  @override  Widget build(BuildContext context) {    return CustomPaint(      painter: BezierPainter2(          progress: this.widget.progress,          waveHeight: 15,          moveX: _animationTranslate.value,          r: _r,          waveLength: waveLength),    );  }}class BezierPainter2 extends CustomPainter {  final double progress; //进度  final double waveHeight; //波浪高  final double moveX; //移动的X,此处变化一个波长  final double r; //半径  final double waveLength; //一个波浪的长度  final waveCount = 2; //波浪个数  double _progressY; //移动中Y的坐标  Paint _pointPaint; //点画笔  Paint _pathPaint; //线画笔  Paint _whitePaint; //空白画笔  Path _path = Path(); //路径  Offset centerOffset; //圆心  BezierPainter2(      {this.progress, this.waveHeight, this.moveX, this.r, this.waveLength}) {    _pointPaint = Paint()      ..color = Colors.teal      ..strokeWidth = 4      ..isAntiAlias = true      ..style = PaintingStyle.stroke;    _pathPaint = Paint()      ..color = Colors.deepOrange      ..style = PaintingStyle.fill      ..isAntiAlias = true      ..strokeWidth = 1;    _whitePaint = Paint()      ..color = Colors.white      ..style = PaintingStyle.stroke      ..isAntiAlias = true      ..strokeWidth = 1;    centerOffset = Offset(Screen.screenWidthDp / 2, Screen.screenHeightDp / 2);  }  @override  void paint(Canvas canvas, Size size) {    // TODO: implement paint    //centerOffset圆心    _path.addArc(Rect.fromCircle(center: centerOffset, radius: r), 0, 360);    canvas.clipPath(_path); //把画布裁剪成一个圆形,这样怎么画都是圆。    canvas.drawCircle(centerOffset, r, _pointPaint); //画圆    _path.reset(); //重置路径    //this.progress的范围是0-100。    _progressY = centerOffset.dy + (r - r / 50 * this.progress); //算出Y点的坐标    //将画笔移动至屏幕外    _path.moveTo(-waveLength + moveX, _progressY);    //这里的波峰波谷稍微多点,所以waveCount*2    for (int i = 0; i < waveCount * 2; i++) {      canvas.save();      canvas.restore();      //绘制波谷,同上      _path.quadraticBezierTo(          -waveLength / 4 * 3 + (waveLength * i) + moveX,          _progressY + waveHeight,          -waveLength / 2 + (waveLength * i) + moveX,          _progressY);      //绘制波峰,同上      _path.quadraticBezierTo(-waveLength / 4 + (waveLength * i) + moveX,          _progressY - waveHeight, 0 + waveLength * i + moveX, _progressY);    }    print("_moveX=${moveX.toString()}");    //封闭圆    _path.moveTo(centerOffset.dx + r, _progressY);    _path.lineTo(centerOffset.dx + r, centerOffset.dy + r);    _path.lineTo(centerOffset.dx - r, centerOffset.dy + r);    _path.lineTo(centerOffset.dx - r, _progressY);    _path.close();    canvas.drawPath(_path, _pathPaint);  }  @override  bool shouldRepaint(CustomPainter oldDelegate) {    // TODO: implement shouldRepaint    return true;  }}

本文分享自微信公众号 - Flutter学习簿（gh_d739155d3b2c）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。