小菜一直对动画不太熟悉，最近学习了一些关于动画的皮毛知识，网上资料很多，小菜按自己的理解整理一下。
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)));
}
}
小菜对动画的研究不深，仅整理一些基本的动画方法，如有不对的地方希望多多指导；以下是小菜公众号，欢迎闲来吐槽～
公众号
网友评论