在 Flutter 中带有动画的 Squiggly Seekbar

Question

我正在尝试在 Flutter 中实现 Squiggly Seekbar with Animation。

这是它的样子的例子[视频预览]：

我试过下面的一些代码

class MyWaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    debugPrint('Widget: ${size.width}, Height: ${size.height}');
    path.lineTo(0.0, 100.0);
    path.lineTo(0.0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 100.0);

    for (int i = 0; i < 10; i++) {
      if (i % 2 == 0) {
        path.quadraticBezierTo(
            size.width - (size.width / 16) - (i * size.width / 8),
            0.0,
            size.width - ((i + 1) * size.width / 8),
            size.height - (size.height * 0.8));
      } else {
        path.quadraticBezierTo(
            size.width - (size.width / 16) - (i * size.width / 8),
            size.height - (size.height * 0.6),
            size.width - ((i + 1) * size.width / 8),
            size.height - (size.height * 0.8));
      }
    }

    path.lineTo(0.0, 40.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

我得到了这个博客的帮助，任何人都可以帮助使动画无限？

Answer 1

我刚刚 published 一个包，正是你正在寻找的东西！

github 存储库链接在那里，以防您对其内部工作感兴趣