Flutter - ClipPath + AnimatedContainer - 路径没有正确动画

问题描述 投票:0回答:1

我期待动画在y轴上移动的AnimatedContainerClipPath

这是我目前的代码:

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;
}

根据我传递给这个类的高度,AnimatedContainer将使用动画在两者之间转换,而裁剪器不会动画。

这是它的样子:

example

我尝试使用AnimatedContainer包装剪辑器并在其上设置动画,但它没有用完。

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

感谢任何想要帮助的人

animation flutter clip
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.