Flutter

Question

我希望为在 y 轴上移动的 AnimatedContainer 和 ClipPath 设置动画。

这是我当前的代码：

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 的高度，AnimatedContainer 将通过动画在两者之间转换，而裁剪器不会设置动画。

这是它的样子：

我尝试用 AnimatedContainer 包装剪裁器并在其上设置动画，但没有成功。

如何才能使剪切路径与 AnimatedContainer 一起垂直动画？

感谢所有愿意提供帮助的人

Answer 1

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

我将剪辑 class 转换为有状态的以使用动画。

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

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

Answer 2

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

Flutter - ClipPath + AnimatedContainer - 路径动画不正确

Flutter - ClipPath + AnimatedContainer - Path not animating properly

animation

clip