flutter 图解_【Flutter 专题】83 图解自定义 ACEWave 波浪 Widget (一)

      和尚今天尝试一下绘制波浪的效果，虽然 pub 仓库中已经有成熟的插件，但和尚还是准备用之前学习的 Canvas 和 Animation 尝试自定义一个 ACEWave；

1. 绘制曲线

      绘制波浪首先需要绘制曲线，采用 Canvas 绘制贝塞尔曲线；常用的是数学中通常用的 sin(x) / cos(y) 函数即可；

      其中和尚通过 Canvas 绘制时使用了 path.quadraticBezierTo 来绘制从第一个 Point 到另一个 Point 的贝塞尔曲线；

class _ACEWavePainter extends CustomPainter {
    
  @override
  void paint(Canvas canvas, Size size) {
    
    Paint paint = Paint()
      ..color = Colors.red..strokeCap = StrokeCap.round
      ..strokeWidth = 10..style = PaintingStyle.stroke;
    Path path = Path()
      ..moveTo(0, 500)
      ..quadraticBezierTo(size.width / 4, 300, size.width / 2, 500)
      ..quadraticBezierTo(size.width / 4 * 3, 700, size.width, 500);
    canvas.drawPath(path, paint);
  }

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

2. 循环动画

      和尚使用最常用的平移动画来让曲线动起来，其中注意的是：

1. 当第一次动画结束时，通过 controller.repeat() 来实现