Question

我希望为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;
}

基于我传递给该类的高度，AnimatedContainer将通过动画在两者之间过渡，而Clipper不会动画。

外观如下：

我尝试用AnimatedContainer包装快船，并在上面设置动画，但效果不佳。

我如何做到这一点，以使剪切后的路径与AnimatedContainer一起垂直设置动画？

感谢任何想要帮助的人

Answer 1

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

我将剪辑类转换为有状态的动画。

    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

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

Flutter-ClipPath + AnimatedContainer-路径无法正确设置动画

2 个答案: