《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 ...
随机推荐
- java反序列化-ysoserial-调试分析总结篇(3)
前言: 这篇文章主要分析commoncollections3,这条利用链如yso描述,这个与cc1类似,只是反射调用方法是用的不是invokeTransformer而用的是InstantiateTra ...
- optparse(命令行参数解析工具)
在用Python做自动化的时候,命令行的解析一定是少不了的,有很多命令行解析工具库,其中Python内建的一个库optparse,还是比较好用的 1.贴代码并注释 # coding=UTF-8 fro ...
- idea通过maven打jar包不成功或无法加载主类或打成功也找不到jar包
这个问题纠结了我一天,在网上也搜了一些方法,现在把我自己的处理过程记录一下,以方便遇到此类问题的小伙伴参考: 第一步:查看idea的jdk版本与Windows安装的jdk是不是同一个版本,如下图 第二 ...
- Java enum枚举在实际项目中的常用方法
在项目实际开发过程中,经常会遇到对某些固定的值.字典项的定义的需求,很多项目经常使用常量来定义,其实在jdk1.5就已经引入了枚举,使用枚举可以更好的解决这类需求,本文主要记录枚举的优势以及经常在项目 ...
- Python入门的三大问题和三大谎言
Python广告,铺天盖地,小白们雾里看花,Python无限美好.作为会20几种语言(BASIC Foxbase/pro VB VC C C++ c# js typescript HTML Ardui ...
- .Net Core 依赖注入手记
.Net Core自身提供了一套简单的DI框架,能满足我们DI基本的需求.它依赖以下组件,需要从Nuget包下拉取. Microsoft.Extensions.DependencyInjection. ...
- 2653 区间xor
前言 这个题目在我之前那篇c++位运算的的随笔中提到过. 有兴趣的话去看看吧! 飞机场:https://www.cnblogs.com/laoguantongxiegogofs/p/12444517. ...
- vue的watch
watch它可以用来监测Vue实例上的数据变动 尽量一张图解释清楚(尝试用圈圈区分关系): 写的很简单,watch本来就没啥东西我理解为响应式侦听全局变量 watch里绑定全局变量,被绑定全局变量发 ...
- Netty源码分析之ChannelPipeline—出站事件的传播
上篇文章中我们梳理了ChannelPipeline中入站事件的传播,这篇文章中我们看下出站事件的传播,也就是ChannelOutboundHandler接口的实现. 1.出站事件的传播示例 我们对上篇 ...
- php7连接mysql8
最近因为剁手买了mac所以在mac上搭建lnmp环境. 刚好看到mysql从5.7跳到8,性能据说快上一倍,果断尝鲜! lnmp基本都弄好了,但是到用php连接Mysql这一步出了岔子. 出错原因: ...