小知识，大应战！本文正在参加“程序员必备小知识”创造活动。
本文已参加「掘力星方案」，赢取创造大礼包，应战创造激励金。
小菜一直对动画不太熟悉，最近学习了一些关于动画的皮毛知识，网上材料许多，小菜按自己的理解整理一下。
Animation
Animation 能够生成动画进程中的值，生成的值并非单一的 double 也能够是 Size/Color 等；Animation 能够获取状态但无法获取屏幕显示内容。
AnimationController
AnimationController 小菜理解为 Animation 控制器，实践也是一个特别的 Animation，在屏幕改写时会生成一个新的值；运用时需求传递 vsync 值，用来防止屏幕外动画，vsync 值能够继承 TickerProviderStateMixin，若当时页面只要一个 controller 也能够用 SingleTickerProviderStateMixin；
AnimationController 有两个常用办法：
- forward() 办法用来开始动画，即从无到有；
- reverse() 办法用来反向开始动画，即从有到无；
动画分类
Flutter 提供了两种动画，分别是 Tween Animation 补间动画和 Physics-based Animation 基于物理动画；小菜理解为线性匀速动画和非线性动画；
TweenAnimation
Tween 动画是无状态的，只是在固定时间内均匀生成 begin 和 end 的值，通过 animation.value 来获取；
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);
Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(controller);
animation.addListener(() {
setState(() {});
});
CurvedAnimation
CurvedAnimation 的动画进程对错线性的，curve 品种许多，比较符合日常生活的物理进程，例如先快后慢或先增长到一个峰值再降低一级；curve 的动画进程也能够自定义函数等；
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
无论是线性动画还对错线性动画，均可获取动画进程中的值，依据这个值能够灵活的运用在需求的场景；运用动画场景较多的是 透明度/旋转/缩放/平移 等。
AnimatedWidget
Flutter 很交心的提供了自带动画属性的 Widget 极大的便利我们运用简略的动画，涵盖 透明度/旋转/缩放/平移 等常用的动画属性，运用时十分便利；但是缺点也相对明显，这些 Widget 属性相对专注，若需求多种动画属性不太适合；
简略介绍几个小菜日常运用的动画组件；
XXXTransition
FadeTransition 显隐性
FadeTransition(opacity: animation, child: FlutterLogo(size: 100.0))
ScaleTransition 缩放
ScaleTransition(scale: animation, child: FlutterLogo(size: 100.0))
RotationTransition 旋转
RotationTransition(turns: animation, child: FlutterLogo(size: 100.0))
Transform. XXX
Transform.scale 缩放
Transform.scale(scale: curve.value, child: FlutterLogo(size: 100.0))
Transform.rotate 旋转
Transform.rotate(angle: curve.value * pi, child: FlutterLogo(size: 100.0))
Transform.translate 平移
Transform.translate(offset: Offset(100.0 * curve.value, 0.0), child: FlutterLogo(size: 100.0))
AnimatedXXX
AnimatedOpacity 透明度
AnimatedOpacity(opacity: animation.value, duration: Duration(milliseconds: 2000), child: FlutterLogo(size: 100.0))
中心代码：
class _AnimationPageState extends State<AnimationPage03> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
CurvedAnimation curve;
bool isForward = false;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
animation = Tween(begin: 0.0, end: 1.0).animate(controller);
animation.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Animation Demo'),
),
body: Stack(children: <Widget>[
ListView(children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1, child: Center(child: Text('FadeTransition'))),
Expanded(
flex: 1, child: Center(child: Text('ScaleTransition')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: FadeTransition(
opacity: animation, child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: ScaleTransition(
scale: animation, child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1,
child: Center(child: Text('RotationTransition'))),
Expanded(
flex: 1, child: Center(child: Text('AnimatedOpacity')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: RotationTransition(
turns: animation, child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: AnimatedOpacity(
opacity: animation.value,
duration: Duration(milliseconds: 2000),
child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1,
child: Center(child: Text('Transform.translate'))),
Expanded(
flex: 1, child: Center(child: Text('Transform.rotate')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Transform.translate(
offset: Offset(100.0 * curve.value, 0.0),
child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: Transform.rotate(
angle: curve.value * pi, child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1, child: Center(child: Text('Transform.scale'))),
Expanded(flex: 1, child: Center(child: Text('Position')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Transform.scale(
scale: curve.value, child: FlutterLogo(size: 100.0))),
])
]),
posWid()
]),
floatingActionButton: new FloatingActionButton(
tooltip: 'Animation',
child: new Icon(Icons.lightbulb_outline),
onPressed: () {
isForward ? controller.reverse() : controller.forward();
isForward = !isForward;
}));
}
Widget posWid() {
return Positioned(
bottom: 16 + 314 * animation.value,
right: 16 + 84 * animation.value,
child: Container(child: FlutterLogo(size: 100.0)));
}
}
小菜对动画的研讨不深，仅整理一些根本的动画办法，如有不对的地方期望多多指导！
来历：阿策小和尚
