简述
动画效果会对提升用户体验有着显著效果,一个漂亮的动画效果会让人眼前一亮,反正就是用这舒服,如果没有动画效果的加持,整个App会显的非常生涩难用.对于Flutter的动画,作为小白的我也是最近才刚刚接触,所以这里就说一下Futter中如何使用动画.
这一篇主要是来说如何在Flutter中实现一个最简单的动画,这里假设你已经对Flutter有一些基本的了解或者有一定的开发经验了.
构建基础
这里我们就以控制 Container组件中 margin 为示例.
首先我们先创建一个StatefulWidget有状态组件,同时需要混合 SingleTickerProviderStateMixin,至于 SingleTickerProviderStateMixin 是什么,后面我们会讲到,具体代码如下所示.
class FlutterAnimationWidget extends StatefulWidget {
@override
_FlutterAnimationWidgetState createState() => _FlutterAnimationWidgetState();
}
class _FlutterAnimationWidgetState extends State<FlutterAnimationWidget> with SingleTickerProviderStateMixin {
****
}
我们接着创建一个受控Container,放在一个纵向布局中,具体如下所示.关于触发按钮的布局这里就不给过叙述了,不是本文的重点.
Container(
width: 200,
height: 50,
color: Colors.orangeAccent,
margin: EdgeInsets.only(top: 0),
),
构建动画
我们声明动画控制器 _animationController 和margin的top状态属性 _marginTop ,改造Container让margin受控于 _marginTop 的值.具体代码如下所示.
double _marginTop;
AnimationController _animationController;
Container(
...
margin: EdgeInsets.only(top: _marginTop),
...
),
紧接着我们就需要实现 _animationController 了, 假设我们设定动画运行时间为 300 毫秒,top的移动范围为[0, 50],那么具体代码就如下所示.
_marginTop = 0;
_animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this)..addListener(() {
setState(() {
_marginTop = _animationController.value * 50.0;
});
});
这里就要对上述代码进行说明一下, 首先是 AnimationController 这个动画控制类,动画控制类中的只能在给定的时间内线性生成 0 → 1 的数值(默认区间),所以我们需要映射成我们想要的数值就需要使用到 value 这个属性映射成我们想要的值,这里就是简单映射成 0 → 50.
那么我们可不可以改动默认区间呢?当然是可以的,这就需要使用到 lowerBound 和 upperBound 了.那么上面的代码就可以如下示例,两者的效果是一样的.
_animationController = AnimationController(duration: Duration(milliseconds: 300), lowerBound: 0, upperBound: 50, vsync: this)..addListener(() {
setState(() {
_marginTop = _animationController.value;
});
});
那么 代码中 vsync 指向 this,又是什么意思呢?这个简单的来说就是使用Ticker(而不是Timer)来驱动动画会防止屏幕外动画（动画的UI不在当前屏幕时，如锁屏时）消耗不必要的资源.还记得文章一开始状态组件混合 SingleTickerProviderStateMixin 吗?就是这个作用.如果一个组件内存在多个动画控制器,则可以使用 TickerProviderStateMixin .
如下是摘抄 <<Flutter 实战>> 中的对Ticker一段说明.
Flutter应用在启动时都会绑定一个SchedulerBinding，通过SchedulerBinding可以给每一次屏幕刷新添加回调，而Ticker就是通过SchedulerBinding来添加屏幕刷新回调，这样一来，每次屏幕刷新都会调用TickerCallback。使用Ticker(而不是Timer)来驱动动画会防止屏幕外动画（动画的UI不在当前屏幕时，如锁屏时）消耗不必要的资源，因为Flutter中屏幕刷新时会通知到绑定的SchedulerBinding，而Ticker是受SchedulerBinding驱动的，由于锁屏后屏幕会停止刷新，所以Ticker就不会再触发。
对于 addListener() 方法,是给 AnimationController 添加监听回调,并且每一帧都会回调一次.这个我们在里面调用 setState() 方法就能实现对状态组件UI的重建了.
当然了,除了 addListener() 帧监听回调方法之外,还有 addStatusListener() 动画状态的监听,监听的值如下所示.
| 状态 | 说明 |
|---|---|
| AnimationStatus.dismissed | 动画从 controller.reverse() 反向执行 结束时会回调此方法 |
| AnimationStatus.forward | 执行 controller.forward() 会回调此状态 |
| AnimationStatus.reverse | 执行 controller.reverse() 会回调此状态 |
| AnimationStatus.completed | 动画从 controller.forward() 正向执行 结束时会回调此方法 |
使用的话,示例如下所示.
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) print("动画完成");
});
构建完成动画控制器,但是不要忘了最后需要进行释放操作.代码如下所示.
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
执行动画
指定动画比较简单.主要有如下几个方法.
| 方法 | 说明 |
|---|---|
| forward() | 正向开始执行动画 |
| reverse() | 反向开始执行动画 |
| reset() | 重置动画到初始状态 |
| dispose() | 取消/停止动画 |
这里我们就只需要在触发时间中调用 forward() 就可以了.具体示例如下所示.
void startEasyAnimation() {
_animationController.forward();
}
示例代码
由于这一篇比较简单,所以我们就把示例代码贴到文章中了,需要的拿走.
class FlutterAnimationWidget extends StatefulWidget {
@override
_FlutterAnimationWidgetState createState() => _FlutterAnimationWidgetState();
}
class _FlutterAnimationWidgetState extends State<FlutterAnimationWidget> with TickerProviderStateMixin {
AnimationController _animationController;
double _marginTop;
@override
void initState() {
super.initState();
_marginTop = 0;
_animationController = AnimationController(duration: Duration(milliseconds: 300), lowerBound: 0, upperBound: 50, vsync: this)..addListener(() {
setState(() {
_marginTop = _animationController.value;
});
});
_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: Colors.orangeAccent,
margin: EdgeInsets.only(top: _marginTop),
),
FlatButton(
onPressed: startEasyAnimation,
child: Text(
"点击执行最简单动画",
style: TextStyle(color: Colors.black38),
),
),
],
),
),
);
}
}
结语
OK,使用Flutter实现一个最简单的动画就说道这里了,接下来,骚栋会发布更多Flutter动画相关文章,欢迎关注评论,感谢大家了.
网友评论