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

【问题标题】：Flutter - ClipPath + AnimatedContainer - Path not animating properlyFlutter - ClipPath + AnimatedContainer - 路径动画不正确
【发布时间】：2019-04-12 10:01:10
【问题描述】：

我希望为 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 将在两者之间通过动画进行转换，而剪辑器不会进行动画处理。

看起来是这样的：

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

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

感谢任何愿意提供帮助的人

【问题讨论】：

标签： animation flutter clip

【解决方案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 控制动画。

【讨论】：

【解决方案2】：

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

【讨论】：