动画系统

动画运行的原理
任何程序的动画原理都是一样的，即：视觉暂留，视觉暂留又叫视觉暂停，人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。

电影就是依靠视觉暂留，在感官上电影是连续的。使动画有流畅的感觉，帧率至少要达到24帧，即：每秒播放24个图像，因此动画有一个非常关键的性能参数FPS（Frame Per Second），即帧率，达到24fps，画面就比较流畅了，Flutter的FPS理论上可以达到60fps，超过48fps，将会感到丝滑般的顺畅。

Flutter动画系统
为了方便开发者进行动画的开发，Flutter将动画系统进行封装，抽象出4个概念：Animation、Curve、AnimationController、Tween。

Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。
Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。
AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。
Tween：映射生成不同范围的值，AnimationController的动画值是double类型的，如果需要颜色的变化，Tween可以完成此工作。
将Container控件的大小由100变为300，代码如下：

class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController;

@override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
lowerBound: 100.0,
upperBound: 300.0,
vsync: this);

_animationController.addListener(() {
  setState(() {});
});

super.initState();

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animationController.value,
height: _animationController.value,
color: Colors.red,
),
),
),
],
),
);
}

@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
AI写代码
dart
运行

AnimationController的初始化中vsync，这个参数要说明白能说一天，我们只需先记住其写法，this表示SingleTickerProviderStateMixin，屏幕每一帧都会引起AnimationController值的变化。

dispose方法中要记住释放AnimationController。

UI的更新是通过setState更新的，

_animationController.addListener(() {
setState(() {});
});
AI写代码
dart
运行
1
2
3
效果如下：

默认情况下，动画曲线为线性，修改动画曲线如下：

class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
vsync: this);

_animationController.addListener(() {
  setState(() {});
});

_animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
_animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
super.initState();

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.red,
),
),
),
],
),
);
}

@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
AI写代码
dart
运行

修改的地方说明如下：

AnimationController中lowerBound和upperBound不能在直接设置为100和300，因为AnimationController需要被CurvedAnimation使用，值的范围必须是0-1。
由于AnimationController值的范围是0-1，而动画需要在100-300变化，所以引入Tween。
如果动画是颜色的变化，修改如下：

_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);
AI写代码
dart
运行
1
对动画状态监听：

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
_animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
_animationController.forward();
}
});
AI写代码
dart
运行
1
2
3
4
5
6
7
8
9
动画状态：

dismissed：动画结束，停在开始处。
forward：动画正向进行。
reverse：动画反向进行。
completed：动画结束，停在末尾处。
上面就是动画的基本用法，有没有发现一些通用的地方：

每次刷新UI都需要调用setState。
“懒”是原罪，也是社会进步的最大动力。
Flutter封装了AnimatedWidget，此控件就封装了setState。虽然Flutter为封装了大量的动画控件，但万变不离其宗。

Flutter 25种动画组件介绍
Flutter中提供了大量的动画组件及详细用法：

看到这么多组件是不是晕了，我也没想到会有这么多组件，那我们改如何选择适合的组件？这真是一个灵魂拷问啊。

推荐阅读更多精彩内容