Flutter动画（二）内建隐式动画Widget

动画效果介绍中给出了选择动画的决策树：

使用动画框架不在我们讨论的话题内。flutter支持的动画包括隐式动画和显式动画。

隐式动画和显式动画

隐式动画和显示动画是两种不同的动画实现方式，它们的主要区别在于控制权和动画的重复性。

隐式动画：

自动完成：隐式动画是由系统框架自动完成的，不需要用户手动控制动画过程。
单向且一次性的：隐式动画是一次性的，单方向的，由某个属性值的变化驱动，例如透明度从0到1的变化。
无法自动重复：隐式动画无法实现动画效果从0到1再到0的自动重复。
无法停止：一旦隐式动画开始，就无法中途停止，直到动画完成。
简单易用：隐式动画只能控制duration和curve，不需要创建控制器，只需几行代码就可实现简单的动画效果。

显示动画：

用户控制：显示动画需要用户自己通过AnimationController创建的动画。
灵活且复杂：显示动画可以随时控制动画的开始和暂停，并且可以实现循环的，交错的变化效果。
定义完整流程：显示动画不像隐式动画那样默认从一个初始状态线性变化到目标状态，而是需要显式地定义完整的动画流程。
更灵活：显示动画可以更加灵活地实现更加复杂的动画效果，例如在x和y轴方向上不断缩放的动画对象。

需要注意的是，使用隐式动画后，View会暂时不能接收用户的触摸、滑动等手势，这可能会导致在列表滚动时，如果对其中的view使用了隐式动画，滚动无法主动停止下来，必须等动画结束了才能停止。

flutter既提供了内置的隐式和显式动画相关widget，也提供了相关自定义的widget。

本篇介绍flutter内建的隐式动画Widget。常见的内建隐式动画Widget：

AnimatedAlign

AnimatedContainer

AnimatedDefaultTextStyle

AnimatedFractionallySizedBox

AnimatedScale

AnimatedRotation

AnimatedSlide

AnimatedOpacity、SliverAnimatedOpacity

AnimatedPadding

AnimatedPhysicalModel

AnimatedPositioned

AnimatedPositionedDirectional

AnimatedTheme

AnimatedCrossFade

AnimatedSize

AnimatedSwitcher

TweenAnimationBuilder

AnimatedSwitcher

9.6 动画切换组件（AnimatedSwitcher） | 《Flutter实战·第二版》

AnimatedCrossFade

和AnimatedSwitcher不同的是，AnimatedCrossFade是针对两个子元素，而AnimatedSwitcher是在一个子元素的新旧值之间切换。

TweenAnimationBuilder

TweenAnimationBuilder可以用于实现自定义的隐式动画。TweenAnimationBuilder用法比较简单，首先需要一个动画时长参数：

Dart 复制代码

TweenAnimationBuilder<double>(
	duration: Duration(seconds: 2),
)

可以设置tween（动画的值），比如需要一个100到200的差值：

Dart 复制代码

tween: Tween<double>(begin: 100.0, end: 200),

如果需要颜色值使用ColorTween,这样我们的动画组件就可以动起来了。

我们也可以设置动画曲线，设置如下：

Dart 复制代码

TweenAnimationBuilder<double>(
	 curve: Curves.bounceIn,
)

通过onEnd监听动画完成通知，用法如下：

Dart 复制代码

TweenAnimationBuilder<double>(
	 onEnd: () {}
)

然后添加一个builder方法来提供widget消费动画值，用法如下：

Dart 复制代码

builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      }

builder方法有3个参数，第一个是BuildContext，第二个value的类型取决于你要做动画的数据，比如：

Dart 复制代码

TweenAnimationBuilder<double>(
	builder: (context, value, child) {
	}
)

value的类型就是double，如果是TweenAnimationBuilder<Color>,value的类型就是Color。

第三个就是TweenAnimationBuilder的子组件，用于优化。这种优化在flutter中很常见，避免了子组件中不变的部分被反复创建。