Flutter 动画组件那么多，记不住不会用怎么办？我都给你整理好了，收藏吧！

前言

Flutter 自带的基础动画组件称之为隐式动画组件，小小统计了一下，会有几十个那么多，包括通用的动画构建类、特定的动画效果类以及封装好的动画组件。这么多，好处是想用的基本都有，不好的地方是记不住，找起来也不太方便。本篇特地整理了 Flutter 的隐式动画组件，方便各位 Flutter 爱好者（搬砖者）随时查看和使用。

AnimatedWidget

AnimatedWidget 是一个抽象类，可以通过 Animation 对象的值动态刷新每一帧从而实现动画效果。如果你想构建自己可复用的动画组件，那么可以使用 AnimatedWidget，我们在 大风车吱呀吱哟哟地转，这个风车加载指示组件真有趣！ Flutter 入门与实战（九十四）：让你的组件拥有三维动效​ 这两篇文章中就使用了AnimatedWidget构建了一个风车加载指示动画组件。AnimatedWidget 的构造方法如下，其中 listenable 是一个抽象类 Listenable 对象，一般是 Animation 或 ChangeNotifier。

代码语言：javascript复制

const AnimatedWidget({
  Key? key,
  required this.listenable,
}) 
复制代码

Animation

Animation 不算是一个组件，但是构建隐式动画组件都需要 Animation 对象来控制动画起止参数，动画曲线等。借助 Animation，你可以基于 StatefulWidget 或 StatelessWidget 构建自己的动画类。我们在 Flutter 入门与实战（九十三）：使用 Animation 构建爱心三连动画 使用了 Animation 构建了爱心尺寸变化的动画。Animation 通常是依赖 AnimationController 组合实现动画效果。

AnimatedBuilder

AnimatedBuilder 将动画效果和组件分离，从而使得动效可以应用与不同组件。如果在应用中一个动效会被用于多个不同的组件，那么 AnimatedBuilder 是首选。我们在 Flutter 入门与实战（九十六）：使用 AnimatedBuilder 分离组件和动画，实现动效复用​ 做了AnimatedBuilder的示例应用。AnimatedBuilder 的构造方法如下，animation 和 builder 是外部传入的，因此可以构造与组件分离的可复用的动画效果。

代码语言：javascript复制

const AnimatedBuilder({
    Key? key,
    required Listenable animation,
    required this.builder,
    this.child,
  }) 
复制代码

AnimatedContainer

AnimatedContainer 是 Container 的动画替换组件，可以通过修改动画过程中的尺寸、对齐方式，tranform 参数等实现容器的动画效果。我们使用了 AnimatedContainer 实现了一个笑脸动画： 你看我做的这个笑嘻嘻的动态表情，像不像求码农修电脑的样子？ AnimatedContainer的构造方法如下，可以看到基本上所有的布局相关的属性都可以受动效控制。

代码语言：javascript复制

AnimatedContainer({
  Key? key,
  this.alignment,
  this.padding,
  Color? color,
  Decoration? decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
})
复制代码

AnimatedPositioned

AnimatedPositioned 是 Stack 组件中的 Positioned 的动画替换组件。可以通过 AnimatedPositioned 实现组件在 Stack 组件的位置，从而实现相对 Stack 组件的移动效果，譬如：