《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地址:http://laomengit.com 里面包含160多个组件的详细用法。
《Flutter 动画系列一》25种动画组件超全总结的更多相关文章
- 《Flutter 动画系列》组合动画
老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- 【原】iOSCoreAnimation动画系列教程(二):CAKeyFrameAnimation【包会】
在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iOS核心动画CoreAnimation中CABasicAnimation ...
- Android 三种动画详解
[工匠若水 http://blog.csdn.net/yanbober 转载请注明出处.点我开始Android技术交流] 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让 ...
- Android开发之三种动画
转载:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html http://www.lightskystreet.com/2 ...
- Vue.js 系列教程 5:动画
原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...
- Flutter路由的跳转、动画与传参(最简单)
跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...
随机推荐
- 基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
- 达拉草201771010105《面向对象程序设计(java)》第九周学习总结
达拉草201771010105<面向对象程序设计(java)>第九周学习总结 实验九异常.断言与日志 实验时间 2018-10-25 1.实验目的与要求 (1) 掌握java异常处理技术: ...
- Javascript学习笔记-基本概念-语法、关键字和保留字、变量
语法 1.区分大小写 2.标识符 所谓标识符,就是指变量.函数.属性的名字,或者函数的参数. 命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($): 其他字符可以是字母.下划线.美元 ...
- 小技巧(一):将文本文件txt或网页快捷方式固定到win10开始菜单
win10不知道怎么回事不支持将文本文件和网页快捷方式固定到开始菜单 解决方法: 利用cmd 创建一个快捷方式: 路径:cmd /A /C C:\Users\Admin\Desktop\test.t ...
- 关于图数据库HugeGraph的百万,千万,亿量级测试
1.Hugegraph测试硬件 1.1.本机硬件 本机测试hugeGraph版本:0.10.4 后置存储数据库:rocksdb,1TB的普通硬盘 1.2.测试服务器硬件 测试服务器hugegraph版 ...
- .NET Core C#目录
.NET Core技术开发指南 简介 本系列教程是一份关于微软.NET Core技术栈的全面的教程,其中涉及了C#.Typescript.Angular.Redis等一系列的教程.其中教程中通常会含有 ...
- C/C++ 手动开O2
手动O2比赛不能用,平时玩玩就好 #pragma GCC optimize (2) #pragma G++ optimize (2)
- python之迭代器 生成器 枚举 常用内置函数 递归
迭代器 迭代器对象:有__next__()方法的对象是迭代器对象,迭代器对象依赖__next__()方法进行依次取值 with open('text.txt','rb',) as f: res = f ...
- [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.
使用VScode开发vue中,v-for在Eslint的规则检查下出现报错:如下Elements in iteration expect to have ‘v-bind:key’ directives ...
- vim不能使用小键盘
使用终端登录Linux后使用vim编辑文本,这时在默认设置下载插入模式使用小键盘会插入一些非数字的字符. 更改的方法: 在终端设置中选择终端类型为linux