Animation 颤振-ClipPath+；AnimatedContainer-路径未正确设置动画

我希望对

AnimatedContainer

和

ClipPath

在y轴上移动进行动画制作

这是我当前的代码：

class Clip extends StatelessWidget {

  final double height;

  Clip(this.height);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ClipPath(
        clipper: RoundedClipper(height),
        child: AnimatedContainer(
          duration: Duration(seconds: 5),
          height: height,
          color: Colors.amber,
        ),
      ),
    );
  }
}

class RoundedClipper extends CustomClipper<Path> {
  final double height;

  RoundedClipper(this.height);

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, height - 200);
    path.quadraticBezierTo(
      size.width / 2,
      height,
      size.width,
      height - 200,
    );
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

class Clip扩展了无状态小部件{
最终双倍高度；
夹子（此高度）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：ClipPath(
裁剪器：圆形裁剪器（高度），
子：动画容器(
持续时间：持续时间（秒数：5），
高度:高度,，
颜色：颜色。琥珀色，
),
),
);
}
}
类RoundedClipper扩展了CustomClipper{
最终双倍高度；
圆剪（此高度）；
@凌驾
路径getClip（大小）{
var path=path（）；
路径.lineTo（0.0，高度-200）；
path.quadraticBezierTo(
尺寸。宽度/2，
高度，
大小、宽度，
高度-200，
);
path.lineTo（size.width，0.0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）=>true；
}

根据我传递给该类的高度，AnimatedContainer将使用动画在这两个类之间转换，而clipper将不设置动画

这就是它的样子：

我试着用一个动画容器包装裁剪器并设置动画，但没有成功

如何使剪裁路径与AnimatedContainer一起垂直设置动画

---

感谢所有想要帮助的人，动画容器使用它自己的动画，所以，我不知道剪辑路径和动画容器是否可以一起使用相同的动画。但我尝试了类似的方法，通过使用自定义动画来满足您的需要。请看一下，看看这是不是你想要的

为了使用动画，我将clip类转换为stateful

    class Clip extends StatefulWidget {
      final double height;

      Clip(this.height);

      @override
      _ClipState createState() => _ClipState();
    }

    class _ClipState extends State<Clip> with TickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> animation;
      final double startingHeight  =20.0;

      @override
      void initState() {
        super.initState();
        _controller =
            AnimationController(vsync: this, duration: Duration(seconds: 5));
            animation = Tween<double>(begin: startingHeight, end: widget.height).animate(_controller);
        _controller.forward(from: 0.0);
      }

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

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: AnimatedBuilder(
            builder: (context, anim) {
              return ClipPath(
                clipper: RoundedClipper(animation.value),
                child: Container(
                  height: animation.value,
                  color: Colors.amber,
                ),
              );
            },
            animation: _controller,
          ),
        );
      }
    }

class Clip扩展StatefulWidget{
最终双倍高度；
夹子（此高度）；
@凌驾
_ClipState createState（）=>\u ClipState（）；
}
类_ClipState使用TickerProviderStateMixin扩展状态{
动画控制器_控制器；
动画；
最终双起动高度=20.0；
@凌驾
void initState（）{
super.initState（）；
_控制器=
AnimationController（vsync:this，duration:duration（秒数：5））；
animation=Tween（开始：开始高度，结束：widget.height）；
_控制器向前（起始：0.0）；
}
@凌驾
无效处置（）{
_controller.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
body:AnimatedBuilder(
生成器：（上下文，动画）{
返回ClipPath(
clipper:RoundedClipper（animation.value），
子：容器(
高度：animation.value，
颜色：颜色。琥珀色，
),
);
},
动画：_控制器，
),
);
}
}

---

在这里，您可以使用_controller控制动画。

这将无法正常工作，最简单的方法是创建另一个小部件（屏幕）并导航到它，然后添加目标容器（动画完成后），并使用具有相同标记键的（英雄）小部件在两个屏幕中封装两个容器