带有弯曲动画的动画卡顿

Question

我已经使用在屏幕上移动的CustomClipper创建了一个简单的波浪动画。 我正在使用AnimatedBuilder和AnimationController一起创建AnimationController 。 当我将AnimationController用于AnimatedBuilder的animation参数并将控制器的value传递到我的WaveClipper ，动画效果很好，并且可以平滑地在屏幕上移动。

然而，我想在动画中添加一条曲线，它有点工作，但是我在控制器的持续时间设置为 30+ 秒的动画中遇到了很多口吃。 我认为这可能是一个 vsync 问题，但我无法找到可以让CurvedAnimation同步的地方，这样它就不会口吃。 这是有问题的代码：

class _AnimatedWaveClipperState extends State<AnimatedWaveClipper>
    with SingleTickerProviderStateMixin {
  late AnimationController _aniCtrl;
  late Animation _ani;
  @override
  void initState() {
    super.initState();
    _aniCtrl = AnimationController(
        duration: widget._duration, 
        vsync: this);

    _aniCtrl.value = widget._waveXOffset;
    _aniCtrl.repeat();

    _ani = CurvedAnimation(parent: _aniCtrl, curve: Curves.slowMiddle);
  }

  @override
  void dispose() {
    _aniCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _ani,
      builder: (context, child) {
        return ClipPath(
            clipper: WaveClipper(_ani.value, widget._waveHeight),
            child: widget._child);
      },
    );
  }
}