Flutter 中的 AnimatedBuilder

Question

我有一个动画，无法理解这段代码中的一件事

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..forward();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Material(
      child: Stack(
        children: [
      AnimatedBuilder(
                animation: _controller,
                builder: (context, child) {
                  return AnimatedPositioned(
                    top: ((size.height) * _controller.value) + 100,
                    duration: Duration(milliseconds: 500),
                    curve: Curves.fastOutSlowIn,
                    left: 0,
                    child: Container(
                      height: 250,
                      width: size.width * 0.6,
                      color: Colors.red,
                    ),
                  );
                },
              ),
          ]
        )
      );
  }
}

此代码创建一个容器并为其位置设置动画。 我无法理解的是我在AnimatedPositioned 中指定了一个持续时间（500 毫秒）并指定了 3 秒作为_controller 的持续时间

1. 为什么盒子会在 3 秒内而不是 500 毫秒内完成动画
2. 动画最初不跟随曲线（即它线性移动，然后在一段时间后决定跟随曲线）

我还在学习动画，所以这可能是一个愚蠢的疑问，但我真的无法理解。 如果有人可以解释相关代码示例的情况，将不胜感激

Answer 1

查看您的代码，您已为 AnimatedPositioned 小部件指定了持续时间。基本上 AnimationController 在指定的持续时间（在您的示例中为 3 秒）内从 0-1 进行插值。随着 animationController 值的每一个最小变化，animatedBuilder 正在重建，同时我们还可以看到 AnimatedPositioned 小部件顶部的值发生了变化，但是当它开始动画时，animatedBuilder 正在重新构建。这种情况一直持续到 AnimationController 完成其动画（即从 0-1 插值 3 秒）。 发布动画控制器完成AnimatedPositioned 小部件开始根据 lastValue（在 3 秒结束时）将其顶部值动画化到 currentValue 它使用为其指定的持续时间和曲线进行动画处理。

总而言之，您将看到两个动画发生，第一个（一个使用 AnimationController）需要 3 秒，第二个动画（使用 AnimatedPositioned）需要 500 毫秒。第二个动画总是试图完成它的动画，但由于它被包裹在 AnimatedBuilder 中，它最终会在 3 秒结束时完成它的动画。

AnimatedPositioned 的工作方式是，在重建小部件时（例如通过 setState），每次更改此小部件的属性时，您都会看到小部件在指定的持续时间内从其 oldValue 动画到新 Value。

例如，您已指定 top: ((size.height) * _controller.value) + 100,
当 top 的值发生更改时，例如，您通过 setState 将其分配给 100，然后您将看到曲线和持续时间生效，并且小部件从原始值垂直动画到 100。

AnimatedContainer()、AnimatedPositioned() 等这种类型的小部件在没有 AnimationController 的情况下工作，在这种情况下，您需要为这些小部件提供持续时间。

我建议看一下The AnimatedPositioned Widget's example here，它基本上解释了我上面给出的示例