1. 动画四要素

1.1 插值器

// double 类型的动画
Animation<double> => Tween(begin: 0.0, end: 200.0).animate(controller)

// int 类型的动画
Animation<int> => IntTween(begin: 0, end: 1)

// alignment
Animation<AlignmentGeometry> => Tween(begin: Alignment.center, end: Alignment.TopLeft)

// 颜色渐变动画
Animation<color> => ColorTween(begin: Colors.grey, end: Colors.red)

// size类型的动画
Animation<Size> => SizeTween(begin: Size(100,100), end: Size(200, 200))
// Animation<Size> sizeAnim = SizeTween(begin: Size(100,100),end: Size(200,200)).animate(controller)
//     ..addListener(() {
//         print("reverse====${sizeAnim.value}");
//         setState(() {
//         // the state that has changed here is the animation object’s value
//         });
//     })
//     ..addStatusListener((status){
//     });
// SizedBox.fromSize(
//     child: Container(
//         color: Colors.red,
//     ),
//     size: sizeAnim.value,
// )


// Rect 类型动画
RectTween(begin: Rect.fromLTRB(100,100,100,100), end: Rect.fromLTRB(100,100,100,100))

// 常量值动画: 
Animation<int> constantAnim = ConstantTween<int>(5)

// 反转动画
Animation reverseAnim = ReverseTween(IntTween(begin: 0, end: 200))

// 步数动画，比如做个计时器  
Animation<int> stepAnim = StepTween(begin: 10, end: 0)

...更多...

1.2 动画曲线

Curve

linear
decelerate
ease
easeIn
easeOut
easeInOut
fastOutSlowIn
bounceIn
bounceOut
bounceInOut
elasticIn
elasticOut
elasticInOut

final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.easeIn,
  reverseCurve: Curves.easeOut,
);

1.3 Ticker providers

class _MyAnimationState extends State<MyAnimation> 
  with TickerProviderStateMixin {
    
}

1.4 动画控制器（AnimationController）

// 混入 SingleTickerProviderStateMixin 使对象实现 Ticker 功能
class _AnimatedContainerState extends State<AnimatedContainer>
        with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 创建 AnimationController 动画
    _controller = AnimationController(
      // 传入 Ticker 对象
      vsync: this,
      // 传入 动画持续时间
      duration: new Duration(milliseconds: 1000),
    );
    startAnimation();
  }

  Future<void> startAnimation() async {
    // 调用 AnimationController 的 forward 方法启动动画
    await _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _controller.value;
      child: //...
    );
  }
}

enum AnimationStatus {
  /// 动画处于停止状态
  dismissed,
  /// 动画从头到尾执行
  forward,
  /// 动画从尾到头执行
  reverse,
  /// 动画已执行完成
  completed,
}

2. 隐式动画

// AnimatedContainer
AnimatedContainer(
  duration: Duration(seconds: 5),
  width: 60.0,
  height: height,
  color: Color(0xff14ff65),
)

onPressed: (){
  setState(() {
    height = 320.0;
  });
},

// AnimatedOpacity
double opacity = 1.0;
...
AnimatedOpacity(
    opacity: opacity,
    duration: Duration(seconds: 1),
    child: Text("hello"),
)

setState(() {
    opacity = 0.0;
});

...更多...

3. 共享元素转换

Hero
Hero 动画

4. 交错动画

交错动画（Staggered Animations）

Flutter中的动画
Flutter 动画之 Tween
Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
Flutter 通用“动画切换”组件（AnimatedSwitcher）
Flutter动画全解析（动画四要素、动画组件、隐式动画组件原理等）