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

Posted 2023-02-25

【中文标题】Flutter - ClipPath + AnimatedContainer - 路径动画不正确

【英文标题】：Flutter - ClipPath + AnimatedContainer - Path not animating properly

【发布时间】：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 一起垂直动画？

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

【参考方案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】：

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