颤振中的 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 毫秒）并在 _controller

中指定了 3 秒的持续时间

为什么盒子在 3 秒而不是 500 毫秒内动画
动画一开始并没有跟随曲线（即它线性移动，然后在一段时间后它决定跟随曲线）

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

Answer 1

查看您的代码，您已将持续时间指定为 AnimatedPositioned widget.basically AnimationController 在指定的持续时间内从 0-1 进行插值，在您的 example.With animationController 和 animatedBuilder 的值中，每个最小变化为 3 秒正在重建和模拟我们也看到 AnimatedPositioned 小部件顶部的值发生了变化但是当它开始动画时 animatedBuilder 正在重建 again.This 场景一直持续到 AnimationController 完成它的动画（即插值从0-1 持续 3 秒）。 Post animationController 完成 AnimatedPositioned 小部件开始根据 lastValue（在 3 秒结束时）将其最高值动画化为 currentValue 它使用为其指定的持续时间和曲线进行动画处理。

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

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

例如你指定了 top: ((size.height) * _controller.value) + 100,
当 top 的值发生变化时，例如，您通过执行 setState 将其分配给假设 100，那么您将看到曲线和持续时间生效，并且小部件从原始值垂直动画到 100。

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

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

颤振中的 AnimatedBuilder

AnimatedBuilder in flutter

animation

flutter

flutter-animation