Flutter 中动画的使用
在学习了静态页面的搭建后，需要再加上一点动画效果来提升用户体验。
动画静态的画面根据事先定义好的规律，在一定时间内不断微调，产生变化效果。而动画实现由静止到动态，主要是靠人眼的视觉残留效应。所以，对动画系统而言，为了实现动画，它需要做三件事儿：
- 确定画面变化的规律；
- 根据这个规律设置好动画周期，然后启动动画
- 通过不断获取动画当前值，重绘画面。
在Flutter 中，通过Animation、AnimationController 与 Listener完完成这三件事。
Animation：根据预定规则，在动画周期内不断输出动画当前值。
AnimationController：用于控制 Animation，可以设置动画时长、启动、停止动画。
Listener：用于动画的监听，根据回调，获取动画的当前值，进行渲染。
class _AnimationDemo1State extends State with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 创建 controller
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
// 创建 animation
animation = Tween(begin: 50.0, end: 250.0).animate(controller)
..addListener(() {
// 更新状态
setState(() {});
});
//在启动动画时，使用 repeat(reverse: true)，让动画来回重复执行。
controller.repeat(reverse: true);
// 监听动画状态。在动画结束时，反向执行；在动画反向执行完毕时，重新启动执行。
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//在动画结束时，反向执行
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//在动画反向执行完毕时，重新启动执行
controller.forward();
}
});
// 开始动画
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("基础动画"),
),
body: Center(
child: Container(
width: animation.value,
height: animation.value,
color: Colors.yellow,
),
),
);
}
@override
void dispose() {
// 停止动画
controller.stop();
super.dispose();
}
}
可以看到 animation只提供动画数据，因此我们还需要监听动画执行进度，并在回调中使用 setState 强制刷新界面才能看到动画效果。这些步骤都是固定的，有没有什么更简单的方法吗？
AnimatedWidget 与 AnimatedBuilder
通过这两个widget 可以简化我们的动画步骤。 AnimatedWidget： 把对动画的监听放到 AnimatedWidget中，在里面就可以拿到动画的值，进行页面的重绘。
// 通过 AnimatedWidget 来实现动画
class AnimatedWidgetDemo extends AnimatedWidget {
AnimatedWidgetDemo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
@override
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return Container(
width: animation.value,
height: animation.value,
color: Colors.red,
);
}
}
class AnimationDemo2 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AnimationDemo2State();
}
}
class _AnimationDemo2State extends State with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 创建 controller
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
animation = Tween(begin: 50.0, end: 250.0).animate(controller);
//在启动动画时，使用 repeat(reverse: true)，让动画来回重复执行。
controller.repeat(reverse: true);
// 监听动画状态。在动画结束时，反向执行；在动画反向执行完毕时，重新启动执行。
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//在动画结束时，反向执行
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//在动画反向执行完毕时，重新启动执行
controller.forward();
}
});
// 开始动画
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AnimatedWidgetDemo"),
),
body: Center(
child: AnimatedWidgetDemo(
animation: animation,
),
),
);
}
@override
void dispose() {
controller.stop();
super.dispose();
}
}
AnimatedBuilder: 将动画和渲染逻辑分开。
class _AnimationDemo3State extends State with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 创建 controller
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
animation = Tween(begin: 50.0, end: 250.0).animate(controller);
//在启动动画时，使用 repeat(reverse: true)，让动画来回重复执行。
controller.repeat(reverse: true);
// 监听动画状态。在动画结束时，反向执行；在动画反向执行完毕时，重新启动执行。
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//在动画结束时，反向执行
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//在动画反向执行完毕时，重新启动执行
controller.forward();
}
});
// 开始动画
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AnimatedWidgetDemo"),
),
body: AnimatedBuilder(
animation: animation,
builder: (context, child) => Center(
child: Container(
width: animation.value,
height: animation.value,
color: Colors.deepPurple,
),
),
));
}
@override
void dispose() {
controller.stop();
super.dispose();
}
}
可以看到 通过AnimatedBuilder，传入 animation ，然后可以在里面的widget 拿到 animation 的值，然后设置相应的属性，更新UI。
通过上面几种方式对比，仅仅是在动画监听 做了修改而已，从自己添加 listener 到继承 AnimationWidget 传入animation对象，在里面可以使用到；在到 AnimationBuild ，直接传入animation 对象，字面的子 widget 获取到 animation的属性后，更新UI，基本思路都是差不多。
hero 动画
实现小图到大图页面逐步放大的动画切换效果，而当用户关闭大图时，也实现原路返回的动画。这样的跨页面共享的控件动画效果有一个专门的名词，即“共享元素变换”（Shared Element Transition）。
Flutter 也有类似的概念，即 Hero 控件。通过 Hero，我们可以在两个页面的共享元素之间，做出流畅的页面切换效果。
为了实现共享元素变换，我们需要将这两个组件分别用 Hero 包裹，并同时为它们设置相同的 tag “hero”
class AnimationDemo4 extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hero动画"),
),
body: GestureDetector(
//手势监听点击
child: Hero(
tag: 'hero', //设置共享tag
child: Center(
child: Container(width: 80, height: 80, child: FlutterLogo()),
)),
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => Page2())); //点击后打开第二个页面
},
));
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第二个页面"),
),
body: Hero(
tag: 'hero', //设置共享tag
child: Center(
child: Container(width: 320, height: 320, child: FlutterLogo()),
)));
}
}
总结
Flutter 中的动画，是通过 Animation、AnimationController和Listener来完成的，通过Animation设置动画的变化规律、AnimationController设置动画时长、重复次数、开始、停止动画等完成对动画的管理，最后通过 Listener来完成动画的监听，改变widget 属性，刷新UI。Flutter 为我们提供更简单方便的 AnimationWidget、AnimationBuild widget 来帮助我们把动画和UI的更新逻辑分开，更好的完成复杂的动画效果。最后Flutter 还提供了共享元素动画 Hero。
