Flutter：AnimatedContainer - 子部件的属性没有动画

Question

我有一个简单的AnimatedWidget只有一个子小部件。

AnimatedContainer(
   duration: Duration(milliseconds: 2000),
   curve: Curves.bounceOut,
   decoration: BoxDecoration(
      color: Colors.purple,
   ),
   child: FlutterLogo(
     size: _boxSize,
   ),
),

哪里_boxSize像这样被动画化：

void _startAnimation() => setState(() {
    _boxSize *= 1.7;
  });

AnimatedContainer 然而，不适用于子部件。您需要更改 的直接属性AnimatedContainer才能使动画正常工作。

这符合文档：

The [AnimatedContainer] will automatically animate between the old 
and new values of properties when they change using the provided curve 
and duration. Properties that are null are not animated. 
Its child and descendants are not animated.

与 ALSO ABLE to animate it Children等效的是什么？AnimatedContainer

Answer 1

很少有小部件可以使孩子动起来。您可以使用 Widget 将新的 flutter 徽标小部件替换为首选尺寸AnimatedSwitcher。

1. AnimatedSwitcher - 此小部件将用新小部件交换子小部件。
2. AnimatedPositioned - 每当给定位置发生变化时，它都会更改堆栈小部件中子部件的位置。
3. AnimatedAlign - 对齐的动画版本，只要给定的对齐方式发生变化，它将更改子对象的对齐方式。
4. AnimatedCrossFade - 它在两个孩子之间淡入淡出，并在他们的大小之间进行动画播放。

Answer 2

没有神奇的小部件可以简单地递归地为所有孩子设置动画。但我认为你想要的是一个隐式动画的小部件。IE。您可以更改小部件的构造函数参数，并且随着它的更改，它会从一个值动画到下一个值。

最简单的方法可能是ImplicitlyAnimatedWidget使用AnimatedWidgetBaseState. 因此，对于为属性设置动画的示例，boxSize可能如下所示：

class AnimatedFlutterLogo extends ImplicitlyAnimatedWidget {
  const AnimatedFlutterLogo({Key key, @required this.boxSize, @required Duration duration})
      : super(key: key, duration: duration);

  final double boxSize;

  @override
  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() => _AnimatedFlutterLogoState();
}

class _AnimatedFlutterLogoState extends AnimatedWidgetBaseState<AnimatedFlutterLogo> {
  Tween<double> _boxSize;

  @override
  void forEachTween(visitor) {
    _boxSize = visitor(_boxSize, widget.boxSize, (dynamic value) => Tween<double>(begin: value));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlutterLogo(
        size: _boxSize?.evaluate(animation),
      ),
    );
  }
}

恕我直言，这已经非常简洁了，唯一真正的样板基本上是必须为您想要设置动画的所有属性forEachTween(visitor)创建对象的方法。Tween