简述
在 Flutter动画 1 - 实现一个最简单的动画 中,我们只使用到AnimationController就实现了一个简单的动画,但是如果映射的值复杂多变,或者想让值映射成颜色等等,这时候单个AnimationController就不能实现我们的需求了,这时候就需要使用到 Tween 以及 Animation.
其实在 Flutter动画 1 中, 我也是用了取巧的方案,对于AnimationController,我们要尽量保持它的单一职责性,他就是来管理动画的执行,过程等,它不应该管控每一个动画的具体实现过程.一个动画的具体实现过程应该由谁实现呢?答案是 Animation, 对于 Tween 也是要生成 Animation 然后再执行.
Animation、AnimationController
AnimationController 在 Flutter动画 1 简单说了一下.但是 AnimationController 实际上是继承于 Animation.
Animation 这个类是一个抽象类,所以我们不常用,我们常使用的是 Animation<double> 、Animation<Color> 、Animation<Size>等. Animation主要是用来保存插值和状态(AnimationStatus),它和UI渲染没有太多关系(渲染还是主要通过调用 setState() 来实现). 和Android、iOS一样,动画的输出值不一定是线性的,也可以是曲线的,这个是由 Curve 来决定的.当然了,Animation也提供了添加监听的方法,分别是addListener() 帧回调添加方法 和 addStatusListener() 状态回调添加方法.
AnimationController 首先是继承于 Animation 的, 相对Animation而言,AnimationController作用则是控制动画.它可以设置动画的时长,并且包含动画的执行方法,具体如下表格所示.
| 动画执行方法 | 说明 |
|---|---|
| forward() | 正向开始执行动画 |
| reverse() | 反向开始执行动画 |
| reset() | 重置动画到初始状态 |
| dispose() | 取消/停止动画 |
下面就是Animation 和 AnimationController 两者的UML图,这里只列出了比较常用的方法和属性. (PS:第一次画UML图,可能会有问题,哈哈哈)
Tween
根据上面的说法,如果我们想要把 0 → 1 映射成 0 → 50的话,我们不应该直接修改 AnimationController ,而是通过使用 Animation 的方式,这个时候我们通常使用 Tween 来生成 Animation<double>.回到上一章节的示例.在构建动画的时候,我们就可以按照如下步骤构建动画了.
- 我们先声明一个double类型的Animation成员变量.
Animation<double> _animation;
- 在
initState中,我们需要通过 Tween 来实现这个 _animation.tween设置区间值为[0,50],然后通过animate()方法生成Animation,该方法传入参数一般为 AnimationController,用于控制动画的执行.具体代码如下所示.
Tween<double> tween = Tween<double>(begin: 0, end: 50);
_animation = tween.animate(_animationController);
- 接下来就是监听动画帧,然后通过
setState()来重构UI.具体如下所示.
_animation.addListener(() {
setState(() {});
});
- 上面两步代码可以合并成如下代码.
_animation = Tween<double>(begin: 0, end: 50).animate(_animationController)
..addListener(() {
setState(() {});
});
- 那么,如何动态的改变widget的margin值呢,这个时候我们只需要拿到 _animation.value 值就可以了,因为这时候 _animation 的插值区间已经是 [0, 50] 了.具体如下所示.
Container(
...
margin: EdgeInsets.only(top: _animation.value),
),
那么,如果想要动态改变颜色,我们该如何构建呢?我们只需要按照上面的照葫芦画瓢就可以了.具体的构建过程如下所示.
- 声明一个颜色的 Animation,具体代码如下所示.
Animation<Color> _colorAnimation;
- 在
initState()方法中对 _colorAnimation 进行如下代码实现.并且交由 _animationController 来管控这个动画.
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
..addListener(() {
setState(() {});
});
- 使用也是直接拿到 _colorAnimation.value ,具体代码如下所示.
Container(
...
color: _colorAnimation.value,
...
),
上面的两个动画构建完成之后,我们仍然调用
_animationController.forward();方法.发现两个动画是同步执行的,这时候我们就会有这样的疑问,如果实现动画的顺序执行呢? 骚栋将在下一篇博客中来简单聊聊实现动画的顺序执行的方案.
示例代码
这一篇Demo代码仍然比较简单,直接就粘贴到博客中了,具体如下所示.
class FlutterAnimationWidget extends StatefulWidget {
@override
_FlutterAnimationWidgetState createState() => _FlutterAnimationWidgetState();
}
class _FlutterAnimationWidgetState extends State<FlutterAnimationWidget> with TickerProviderStateMixin {
AnimationController _animationController;
Animation<double> _animation;
Animation<Color> _colorAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
_animation = Tween<double>(begin: 0, end: 50).animate(_animationController)
..addListener(() {
setState(() {});
});
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
..addListener(() {
setState(() {});
});
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) print("动画完成");
});
}
void startEasyAnimation() {
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
height: 50,
color: _colorAnimation.value,
margin: EdgeInsets.only(top: _animation.value),
),
FlatButton(
onPressed: startEasyAnimation,
child: Text(
"点击执行最简单动画",
style: TextStyle(color: Colors.black38),
),
),
],
),
),
);
}
}
结语
OK,使用Flutter实现一个最简单的动画就说道这里了,接下来,骚栋带着如何实现动画的顺序执行的相关问题来搞下一篇博客,欢迎大家持续关注.
网友评论