Flutter动画 2 |
您所在的位置：网站首页 › animate怎么组合 › Flutter动画 2 |
Flutter动画 2
|
在 Flutter动画 1 - 实现一个最简单的动画 中,我们只使用到AnimationController就实现了一个简单的动画,但是如果映射的值复杂多变,或者想让值映射成颜色等等,这时候单个AnimationController就不能实现我们的需求了,这时候就需要使用到 Tween 以及 Animation. 其实在 Flutter动画 1 中, 我也是用了取巧的方案,对于AnimationController,我们要尽量保持它的单一职责性,他就是来管理动画的执行,过程等,它不应该管控每一个动画的具体实现过程.一个动画的具体实现过程应该由谁实现呢?答案是 Animation, 对于 Tween 也是要生成 Animation 然后再执行. Animation、AnimationControllerAnimationController 在 Flutter动画 1 简单说了一下.但是 AnimationController 实际上是继承于 Animation. Animation 这个类是一个抽象类,所以我们不常用,我们常使用的是 Animation 、Animation 、Animation等. Animation主要是用来保存插值和状态(AnimationStatus),它和UI渲染没有太多关系(渲染还是主要通过调用 setState() 来实现). 和Android、iOS一样,动画的输出值不一定是线性的,也可以是曲线的,这个是由 Curve 来决定的.当然了,Animation也提供了添加监听的方法,分别是addListener() 帧回调添加方法 和 addStatusListener() 状态回调添加方法. AnimationController 首先是继承于 Animation 的, 相对Animation而言,AnimationController作用则是控制动画.它可以设置动画的时长,并且包含动画的执行方法,具体如下表格所示. 动画执行方法说明forward()正向开始执行动画reverse()反向开始执行动画reset()重置动画到初始状态dispose()取消/停止动画下面就是Animation 和 AnimationController 两者的UML图,这里只列出了比较常用的方法和属性. (PS:第一次画UML图,可能会有问题,哈哈哈) 根据上面的说法,如果我们想要把 0 → 1 映射成 0 → 50的话,我们不应该直接修改 AnimationController ,而是通过使用 Animation 的方式,这个时候我们通常使用 Tween 来生成 Animation.回到上一章节的示例.在构建动画的时候,我们就可以按照如下步骤构建动画了. 我们先声明一个double类型的Animation成员变量. Animation _animation; 在 initState 中,我们需要通过 Tween 来实现这个 _animation. tween设置区间值为[0,50],然后通过animate()方法生成Animation,该方法传入参数一般为 AnimationController,用于控制动画的执行.具体代码如下所示. Tween tween = Tween(begin: 0, end: 50); _animation = tween.animate(_animationController); 接下来就是监听动画帧,然后通过 setState() 来重构UI.具体如下所示. _animation.addListener(() { setState(() {}); }); 上面两步代码可以合并成如下代码. _animation = Tween(begin: 0, end: 50).animate(_animationController) ..addListener(() { setState(() {}); }); 那么,如何动态的改变widget的margin值呢,这个时候我们只需要拿到 _animation.value 值就可以了,因为这时候 _animation 的插值区间已经是 [0, 50] 了.具体如下所示. Container( ... margin: EdgeInsets.only(top: _animation.value), ),那么,如果想要动态改变颜色,我们该如何构建呢?我们只需要按照上面的照葫芦画瓢就可以了.具体的构建过程如下所示. 声明一个颜色的 Animation,具体代码如下所示. Animation _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 with TickerProviderStateMixin { AnimationController _animationController; Animation _animation; Animation _colorAnimation; @override void initState() { super.initState(); _animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this); _animation = Tween(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: [ 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实现一个最简单的动画就说道这里了,接下来,骚栋带着如何实现动画的顺序执行的相关问题来搞下一篇博客,欢迎大家持续关注. |
【本文地址】
今日新闻 |
推荐新闻 |