《Flutter 动画系列一》25种动画组件超全总结
动画运行的原理
任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后像”,视觉的这一现象则被称为“视觉暂留”。
电影就是依靠视觉暂留,在感官上电影是连续的。使动画有流畅的感觉,帧率至少要达到24帧,即:每秒播放24个图像,因此动画有一个非常关键的性能参数fps(frame per second),即帧率,达到24fps,画面就比较流畅了,flutter的fps理论上可以达到60fps,超过48fps,将会感到丝滑般的顺畅。
flutter动画系统
为了方便开发者进行动画的开发,flutter将动画系统进行封装,抽象出4个概念:animation、curve、animationcontroller、tween。
- animation:flutter动画中的核心类,此类是抽象类,通常情况下使用其子类:animationcontroller,可以获取当前动画的状态和值,也可以添加其状态变化监听和值变化监听。
- curve:决定动画执行的曲线,和android中的interpolator(差值器)是一样的,负责控制动画变化的速率,系统已经封装了10多种动画曲线,详见
curves
类。 - animationcontroller:动画控制器,控制动画的开始、停止。继承自animation。
- tween:映射生成不同范围的值,animationcontroller的动画值是double类型的,如果需要颜色的变化,tween可以完成此工作。
将container控件的大小由100变为300,代码如下:
class animationdemo extends statefulwidget { @override state<statefulwidget> createstate() => _animationdemo(); } class _animationdemo extends state<animationdemo> with singletickerproviderstatemixin { animationcontroller _animationcontroller; @override void initstate() { _animationcontroller = animationcontroller( duration: duration(seconds: 2), lowerbound: 100.0, upperbound: 300.0, vsync: this); _animationcontroller.addlistener(() { setstate(() {}); }); super.initstate(); } @override widget build(buildcontext context) { return scaffold( appbar: appbar(), body: column( children: <widget>[ raisedbutton( child: text('开始动画'), onpressed: () { _animationcontroller.forward(); }, ), expanded( child: center( child: container( width: _animationcontroller.value, height: _animationcontroller.value, color: colors.red, ), ), ), ], ), ); } @override void dispose() { _animationcontroller.dispose(); super.dispose(); } }
animationcontroller
的初始化中vsync
,这个参数要说明白能说一天,我们只需先记住其写法,this
表示singletickerproviderstatemixin
,屏幕每一帧都会引起animationcontroller
值的变化。
dispose
方法中要记住释放animationcontroller
。
ui的更新是通过setstate
更新的,
_animationcontroller.addlistener(() { setstate(() {}); });
效果如下:
默认情况下,动画曲线为线性,修改动画曲线如下:
class _animationdemo extends state<animationdemo> with singletickerproviderstatemixin { animationcontroller _animationcontroller; animation _animation; @override void initstate() { _animationcontroller = animationcontroller( duration: duration(seconds: 2), vsync: this); _animationcontroller.addlistener(() { setstate(() {}); }); _animation = curvedanimation(parent: _animationcontroller,curve: curves.easein); _animation = tween(begin: 100.0,end: 300.0).animate(_animation); super.initstate(); } @override widget build(buildcontext context) { return scaffold( appbar: appbar(), body: column( children: <widget>[ raisedbutton( child: text('开始动画'), onpressed: () { _animationcontroller.forward(); }, ), expanded( child: center( child: container( width: _animation.value, height: _animation.value, color: colors.red, ), ), ), ], ), ); } @override void dispose() { _animationcontroller.dispose(); super.dispose(); } }
修改的地方说明如下:
- animationcontroller中
lowerbound
和upperbound
不能在直接设置为100和300,因为animationcontroller需要被curvedanimation使用,值的范围必须是0-1。 - 由于animationcontroller值的范围是0-1,而动画需要在100-300变化,所以引入tween。
如果动画是颜色的变化,修改如下:
_animation = colortween(begin: colors.red,end: colors.blue).animate(_animation);
对动画状态监听:
_animationcontroller.addstatuslistener((status) { if (status == animationstatus.completed) { //执行结束反向执行 _animationcontroller.reverse(); } else if (status == animationstatus.dismissed) { //反向执行结束正向执行 _animationcontroller.forward(); } });
动画状态:
- dismissed:动画结束,停在开始处。
- forward:动画正向进行。
- reverse:动画反向进行。
- completed:动画结束,停在末尾处。
上面就是动画的基本用法,有没有发现一些通用的地方:
- 每次刷新ui都需要调用
setstate
。
“懒”是原罪,也是社会进步的最大动力。
flutter封装了animatedwidget,此控件就封装了setstate
。虽然flutter为封装了大量的动画控件,但万变不离其宗。
flutter 25种动画组件介绍
flutter中提供了大量的动画组件及详细用法:
- animatedbuilder:http://laomengit.com/flutter/widgets/animatedbuilder/
- aligntransition:http://laomengit.com/flutter/widgets/aligntransition/
- animatedopacity:http://laomengit.com/flutter/widgets/animatedopacity/
- animatedalign:http://laomengit.com/flutter/widgets/animatedalign/
- animatedpadding:http://laomengit.com/flutter/widgets/animatedpadding/
- animatedcrossfade:http://laomengit.com/flutter/widgets/animatedcrossfade/
- animatedcontainer:http://laomengit.com/flutter/widgets/animatedcontainer/
- animatedpositioned:http://laomengit.com/flutter/widgets/animatedpositioned/
- animatedpositioneddirectional:http://laomengit.com/flutter/widgets/animatedpositioneddirectional/
- animatedswitcher:http://laomengit.com/flutter/widgets/animatedswitcher/
- animatedicon:http://laomengit.com/flutter/widgets/animatedicon/
- tweenanimationbuilder:http://laomengit.com/flutter/widgets/tweenanimationbuilder/
- decoratedboxtransition:http://laomengit.com/flutter/widgets/decoratedboxtransition/
- defaulttextstyletransition:http://laomengit.com/flutter/widgets/defaulttextstyletransition/
- animateddefaulttextstyle:http://laomengit.com/flutter/widgets/animateddefaulttextstyle/
- positionedtransition:http://laomengit.com/flutter/widgets/positionedtransition/
- relativepositionedtransition:http://laomengit.com/flutter/widgets/relativepositionedtransition/
- rotationtransition:http://laomengit.com/flutter/widgets/rotationtransition/
- scaletransition:http://laomengit.com/flutter/widgets/scaletransition/
- sizetransition:http://laomengit.com/flutter/widgets/sizetransition/
- slidetransition:http://laomengit.com/flutter/widgets/slidetransition/
- fadetransition:http://laomengit.com/flutter/widgets/fadetransition/
- animatedmodalbarrier:http://laomengit.com/flutter/widgets/animatedmodalbarrier/
- animatedlist:http://laomengit.com/flutter/widgets/animatedlist/
- hero:http://laomengit.com/flutter/widgets/hero/
其实动画不仅仅是这些控件属性变化,还有使用paint自绘制的动画。
看到这么多组件是不是晕了,我也没想到会有这么多组件,那我们改如何选择适合的组件?这真是一个灵魂拷问啊。
这是《flutter 动画系列》的第一篇,接下来还有:
- 组合动画
- 自定义动画
- 到底如何选择动画控件
交流
如果你对flutter还有疑问或者技术方面的疑惑,欢迎加入flutter交流群(微信:laomengit)。
同时也欢迎关注我的flutter公众号【老孟程序员】,公众号首发flutter的相关内容。
flutter地址: 里面包含160多个组件的详细用法。