Flutter CustomPaint 制造声响不坚定曲线（一）

下一节 Flutter CustomPaint 制造声响不坚定曲线（二）

前语

最近用flutter custompaint做了个曲线随声响不坚定的动效，和大家来同享下结束的进程和思路

曲线制造的结束

不管原生，Flutter还是前端，曲线的制造在不同途径结束都迥然不同。通过确认不同点的方位坐标（x1, y1）（x2,y2）… ，然后用过贝塞尔曲线或许体系办法拟合两点之间的曲线，最终把曲线path给到画布制造，这样曲线就出来了

小插曲

  • 毕竟效果是 初步和末尾振幅为0 向中间方位递增的曲线

  • 咱们从基础初步，咱们先画条振幅相同的曲线，并不坚定。

  • 写代码要循循渐进，一步步的来。。。

    Flutter CustomPaint 制造声响不坚定曲线（一）
    这简略啊

  • 画条两倍容器view宽的波纹曲线

  • 重复从左到右滑动，视觉效果就是曲线不坚定的效果

    搞定后，设计说上面这个是当时偷懒给错了图，当时内心的主意

Flutter CustomPaint 制造声响不坚定曲线（一）

平复下情绪，那咱们就把 振幅相同 和 振幅不同 的曲线都同享下

制造振幅相同的曲线

class VoiceWavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    Path path = Path();
    // 
    path.quadraticBezierTo(50, -80, 100, 0);
    path.quadraticBezierTo(150, 80, 200, 0);
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(VoiceWavePainter oldDelegate) => false;
}
Flutter CustomPaint 制造声响不坚定曲线（一）
Flutter CustomPaint 制造声响不坚定曲线（一）

path.quadraticBezierTo 定义P1 和 P2 方位 一个类似正弦的曲线制造结束，P0 是途径起始点 path.quadraticBezierTo(50, -80, 100, 0); P0（0，0） P1 (50,-80) p2 (100,0) path.quadraticBezierTo(150, 80, 200, 0); P0（100，0） P1 (150,80) p2 (200,0) 以此类推，就呈现需求的类正弦曲线

振幅相同的曲线的不坚定

原理现已说过不再重复，图示更直观, 重复的左滑动，矩形框左右两边波形 左滑的初步和结束时完全相同的，视觉效果就产生曲线一直不坚定的效果

Flutter CustomPaint 制造声响不坚定曲线（一）

毕竟结束

  @override
  void paint(Canvas canvas, Size size) {
    int waveNum = 4;
    double waveWidth = this.painterWidth / waveNum;
    canvas.clipRect((Rect.fromCenter(
        center: Offset(0, size.height / 2),
        width: painterWidth * 2,
        height: 120)));
    canvas.translate(0, size.height / 2);
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    Path path = Path();
    for (var i = 0; i < waveNum * 2; i++) {
      path.quadraticBezierTo(waveWidth / 2 + waveWidth * i,
          waveHeight * (i.isOdd ? 1 : -1), waveWidth * (i + 1), 0);
    }
    canvas.translate(-painterWidth * repaint.value, 0);
    canvas.drawPath(path, paint);
  }
}

  class _VoiceWaveState extends State<VoiceWave>
    with SingleTickerProviderStateMixin {
  AnimationController _waveController;
  @override
  void initState() {
    _waveController =
        AnimationController(vsync: this, duration: Duration(seconds: 1))..repeat();
  }
  @override
  void dispose() {
    _waveController.dispose();
    super.dispose();
  }
  • 定义 AnimationController 并传入 自定义的 CustomPainter
  • painterWidth 曲线的长度 waveNum 可见不坚定的个数
  • waveWidth = this.painterWidth / waveNum，waveWidth 是半个波长的长度 
    for (var i = 0; i < waveNum * 2; i++) {
       path.quadraticBezierTo(waveWidth / 2 + waveWidth * i,
          waveHeight * (i.isOdd ? 1 : -1), waveWidth * (i + 1), 0);
    }
  • 循环定义点位的方位，假如要看到4个上下波峰长的曲线，咱们需求制造8的上下波峰的曲线，共16 个坐标点，简化后通过循环确认点的方位
  • 通过 canvas.translate(-painterWidth * repaint.value, 0) 结束canvas的重复移动

总结

  • 长处
    • 能够快速结束曲线不坚定的效果
  • 缺陷
    • 不坚定个数有必要是半个的正弦周期的偶数倍，奇数的话 重复动画的初步和奇数的点y值正好相反，无所呈现连贯的动效
    • 无法运用渐变色效果

下一节 Flutter CustomPaint 制造声响不坚定曲线（二）

未经作者授权，制止转载