Flutter 掌握动画开发
主本文主要说明动画的基本原理和简单的动画的实例
阅读本文大约需要 6 分钟
背景
给UI界面设计合理的动画，可以让用户觉得更加流畅、直观，提高用户的交互使用感受，改善用户体验。
在 Flutter 中动画分为两类：基于补间 (Tween) 的和基于物理 (Physics) 的；
补间动画是介于两者之间的简称，在补间动画中定义起点和终点、时间点以及定义时间变化和速度的曲线，然后由系统计算如何从开始点到结束点。
物理动画是运动被模拟为与真实世界的行为相似，比如抛一件物体，它落在什么地方取决于这个物体的重量，抛出去的速度以及这个物体与地面的高度，类似数学中的抛物线运动轨迹。
介绍
在 Flutter 中想要实现动画效果离不开几个核心的角色：Animation（动画对象），AnimationController（动画控制器），Tweens（插值器），Curves（动画曲线）；
1、Animation
在 Flutter 中动画本身和UI渲染没有任何关系，Animation是一个抽象类，它拥有其当前值和状态（完成或停止），Flutter 中的动画系统就是基于 Animation 对象的。其中比较常用的就是Animation类是Animation<double>。它可以通过其 value 属性来获取当前动画的值。
Animation 除了可以生成 double 的值之外还可以生成如：颜色--Animation<Color> 或者大小--Animation<Size>。
Animation 对象可以拥有 Listeners 和 StatusListeners 监听器，可以用 addListener() 和addStatusListener() 来添加。只要动画的的值发生变化，就会调用监听器。正常我们在 Listeners 中调用setState() 来触发UI重建；动画开始、结束、向前移动或向后移动时会调用StatusListener。
2、AnimationController
AnimationController 是一个特殊的 Animation 对象，在屏幕刷新的每一帧，就会生成一个新的值。默认情况下，AnimationController 会在特定的时间内线性的生成0.0到1.0的数字。AnimationController派生于 Animation<double>，因此可以在需要Animation对象的任何地方使用。不但如此，AnimationController还具有控制动画的其他方法，比如forward()`方法可以启动动画。
AnimationController({
double value,
this.duration,
this.reverseDuration,
this.debugLabel,
this.lowerBound = 0.0,
this.upperBound = 1.0,
this.animationBehavior = AnimationBehavior.normal,
@required TickerProvider vsync,
})
创建 AnimationController 必须需传入 vsync，传入 vsunc 是为了防止动画的UI不在当前屏幕时，不需要绘制，从而防止消耗不必要的资源。通过将 SingleTickerProviderStateMixin 混入到类定义中，就可以将 statefu l对象作为 vsync 的值。
除了 vsync 还可以传入正向动画执行的时间 duration 以及反向动画执行时间 reverseDuration 等。
常用函数：
| 序号 | 方法 | 介绍 |
|---|---|---|
| 1 | forward() | 开始播放动画 |
| 2 | stop() | 停止动画 |
| 3 | reset() | 重制动画 |
| 4 | reverse() | 反向播放动画，必须处于正向动画播放完成的状态之后才有用 |
| 5 | dispose() | 释放动画占用资源 |
| 6 | repeat() | 循环播放动画 |
注意：动画完成时释放控制器(调用 dispose() 方法)以防止内存泄漏
@override
void dispose() {
animationController.dispose();
super.dispose();
}
3、Tween
默认情况下，AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。比如，可以生产从0-100的数字：
final Tween doubleTween = new Tween<double>(begin: 0.0, end: 100.0);
Tween是一个无状态(stateless)对象，继承自Animatable<T>，而不是继承自Animation<T>。Tween 需要两个值，分别是：begin 和 end。Tween的唯一职责就是定义从输入范围到输出范围的映射。
Animatable与Animation相似，不是必须输出double值，也可以是颜色，比如，从白色到黑色：
final Tween colorTween = new ColorTween(begin: Colors.withe, end: Colors.black);
Tween 可以通过 animate() 方法传入 controller 对象创建 Animation 对象。如下
AnimationController _animationController = AnimationController(animationBehavior:AnimationBehavior.normal,vsync: this);
Tween<double> _tween = Tween<double>(begin: 0.0, end: 100.0)..animate(_animationController);
4、CurvedAnimation
Curves 用来调整动画过程中随时间的变化率，默认情况下，动画以均匀的线性模型变化。Flutter 内部也提供了一系列实现相应变化率的 Curves 对象：linea ------ 线性，decelerate ------ 减速等。
当然，也可以自定义继承 Curves 的类来定义动画的变化率，如：
class ShakeCurve extends Curve {
@override
double transform(double t) {
return math.sin(t * math.PI * 2);
}
}
5、添加监听
目前为止动画只是实现了自身数值的变化，并没有让 Widget 动起来，这里我们需要对动画数值进行监听,然后使用 setstatus 来更新 Widget 的属性，从而使 Widget 动起来。
添加数值监听：
Animation animation = CurvedAnimation(parent: _animationController, curve: Curves.linear);
animation.addListener((){
setState(() {
});
});
除此之外我们还可以监听动画的状态变更，当动画结束时我们反转动画，当动画的反转也结束后我们从新开始动画，这样动画就会一直这样循环下去。
状态变更监听：
animation.addStatusListener((status){
print(status);
});
6、AnimatedWidget
AnimatedWidget 类允许您从 setState() 调用中的动画代码中分离出 widget 代码。AnimatedWidget 不需要维护一个 State 对象来保存动画。
以下代码为官方文档自定义 AnimatedLogo
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
class AnimatedLogo extends AnimatedWidget {
AnimatedLogo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return new Center(
child: new Container(
margin: new EdgeInsets.symmetric(vertical: 10.0),
height: animation.value,
width: animation.value,
child: new FlutterLogo(),
),
);
}
}
class LogoApp extends StatefulWidget {
_LogoAppState createState() => new _LogoAppState();
}
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
controller.forward();
}
Widget build(BuildContext context) {
return new AnimatedLogo(animation: animation);
}
dispose() {
controller.dispose();
super.dispose();
}
}
AnimatedWidget 为什么不需要维护一个 State 对象来保存动画呢？
从 AnimatedWidget 源码中看一看出 AnimatedWidget 是继承自 StatefulWidget 类，在 AnimatedWidget 中，创建 state 是创建了 _AnimatedState，接着看 _AnimatedState 类部分源码：
abstract class AnimatedWidget extends StatefulWidget{
@override
_AnimatedState createState() => _AnimatedState();
}
在 _AnimatedState 类的 initState 方法添加了监听 _handleChange，并在 didUpdateWidget 和 dispose 方法中移除了，_handleChange 里面只有一行代码就是 setState 方法：
_AnimatedState 源码
class _AnimatedState extends State<AnimatedWidget> {
@override
void initState() {
super.initState();
// 添加监听
widget.listenable.addListener(_handleChange);
}
@override
void didUpdateWidget(AnimatedWidget oldWidget) {
super.didUpdateWidget(oldWidget);
// 移除
if (widget.listenable != oldWidget.listenable) {
oldWidget.listenable.removeListener(_handleChange);
widget.listenable.addListener(_handleChange);
}
}
@override
void dispose() {
// 移除
widget.listenable.removeListener(_handleChange);
super.dispose();
}
void _handleChange() {
// 更新状态
setState(() {
// The listenable's state is our build state, and it changed already.
});
}
@override
Widget build(BuildContext context) => widget.build(context);
}
7、并行动画
所谓的并行动画就是一起执行多个动画，在 Flutter 中可以在同一个动画控制器上使用多个Tween，然后每个Tween管理动画中的不同效果，从而实现多个动画同时执行。
final AnimationController controller =
new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
final Animation<double> sizeAnimation =
new Tween(begin: 0.0, end: 300.0).animate(controller);
final Animation<double> opacityAnimation =
new Tween(begin: 0.1, end: 1.0).animate(controller);
可以通过sizeAnimation.value来获取大小，通过opacityAnimation.value来获取不透明度，但AnimatedWidget的构造函数只接受一个动画对象。 为了解决这个问题，可以创建了自己的Tween对象并显式计算了这些值。
其build方法.evaluate()在父级的动画对象上调用Tween函数以计算所需的size和opacity值。
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
class AnimatedLogo extends AnimatedWidget {
// The Tweens are static because they don't change.
static final _opacityTween = new Tween<double>(begin: 0.1, end: 1.0);
static final _sizeTween = new Tween<double>(begin: 0.0, end: 300.0);
AnimatedLogo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return new Center(
child: new Opacity(
opacity: _opacityTween.evaluate(animation),
child: new Container(
margin: new EdgeInsets.symmetric(vertical: 10.0),
height: _sizeTween.evaluate(animation),
width: _sizeTween.evaluate(animation),
child: new FlutterLogo(),
),
),
);
}
}
实例
效果图
1、缩放动画
直接贴代码
///放大缩小动画
Widget scale() {
return Column(
children: <Widget>[
Container(
height: 170,
child: Center(
child: Container(
width: _scaleAnimation.value,
height: _scaleAnimation.value,
child: new FlutterLogo(),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.blue,
child: Text(
"放大",
style: TextStyle(color: Colors.white),
),
onPressed: () {
_scaleController.forward();
},
),
RaisedButton(
color: Colors.red,
child: Text(
"缩小",
style: TextStyle(color: Colors.white),
),
onPressed: () {
_scaleController.reverse();
},
)
],
),
],
);
}
2、淡入淡出动画
代码：
/// 淡入淡出
Widget alpha() {
return Column(
children: <Widget>[
Container(
height: 170,
child: Center(
child: Container(
height: 100,
width: 100,
child: Opacity(
opacity: _alphaAnimation.value,
child: FlutterLogo(),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.blue,
child: Text(
"淡入",
style: TextStyle(color: Colors.white),
),
onPressed: () {
_alphaController.forward();
},
),
RaisedButton(
color: Colors.red,
child: Text(
"淡出",
style: TextStyle(color: Colors.white),
),
onPressed: () {
_alphaController.reverse();
},
)
],
),
],
);
}
注意，一个 Widget 使用多个animationController 需要修改混入SingleTickerProviderStateMixin 为 TickerProviderStateMixin。
结尾
完整代码奉上GitHub地址：fluter_demo ，欢迎star和fork。
到此，本文就结束了，如有不当之处敬请指正，一起学习探讨，谢谢🙏。
