长治网址大全:《Flutter 动画系列一》25种动画组件超全总结

admin/2020-04-03/ 分类:科技/阅读:

Sunbet

www.tggzfm.com展望2019年,将用完善的服务体系,创新的技术应用,雄厚的资金实力,贴心的服务品质,成为Sunbet会员、代理的首选平台。

,

动画运行的原理

任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后像”,视觉的这一现象则被称为“视觉暂留”。

电影就是依靠视觉暂留,在感官上电影是连续的。使动画有流畅的感觉,帧率至少要达到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中lowerBoundupperBound不能在直接设置为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地址:http://laomengit.com 里面包含160多个组件的详细用法。

TAG:
阅读:
广告 330*360
广告 330*360
Sunbet_进入申博sunbet官网
微信二维码扫一扫
关注微信公众号
新闻自媒体 Copyright © 2002-2019 Sunbet 版权所有
二维码
意见反馈 二维码