Flutter 中相似值之间的动画答案

【问题标题】：Animating between Like Values in FlutterFlutter 中相似值之间的动画
【发布时间】：2020-07-19 11:33:03
【问题描述】：

Flutter 非常擅长使两个不同值之间的动画变得简单，但是要为一个在其开始处结束的值设置动画，最好的方法是什么？

例如，我想要收缩一个容器，然后在用户输入时扩展回其原始宽度。

由于似乎没有简单的方法可以做到这一点，我尝试设置动画和动画控制器并尝试快速连续调用 _controller.forward() 和 _controller.backword() （开始状态是容器完全展开，最终状态是容器完全收缩）。请注意，我正在尝试通过 edge insets 属性来执行此操作。

我是否让这变得比需要的更复杂？有没有更好的办法？

void initState() {
super.initState();
_controller = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 1000),
);

_insetAnimation = Tween<EdgeInsetsGeometry>(
  begin: EdgeInsets.symmetric(horizontal: 0),
  end: EdgeInsets.symmetric(horizontal: 500),
).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Curves.bounceIn,
  ),
);
_insetAnimation.addListener(() => setState(() {}));

}

...

FlatButton(
                onPressed: () {
                  setState(() {
                    isSignUp = !isSignUp;
                  _controller.forward();
                  });
                  Future.delayed(Duration(seconds: 1));
                  setState(() {
                    _controller.reverse();
                  });

请注意，我试图通过扩展和收缩边缘插图来达到预期的效果。到目前为止，当我只是调用 forward 时，我能够让它收缩，但是当我在它之后立即添加 reverse 方法时，什么也没有发生。两者之间的延迟只是一种无中生有的绝望尝试:)

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

经过一番挖掘，我发现我可以使用这种语法通过 ..addStatusListener() 获得我想要的效果

_insetAnimation = Tween<EdgeInsetsGeometry>(
  begin: EdgeInsets.symmetric(horizontal: 0),
  end: EdgeInsets.symmetric(horizontal: 25),
).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Curves.easeOut,
    reverseCurve: Curves.bounceIn
  )..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
       _controller.reverse();
      }
    }),
);
_insetAnimation.addListener(() => setState(() {}));

我仍然很好奇是否有更有效的方法来做到这一点

【讨论】：