Flutter 37: 图解 Flutter 基本动画 (一)
小菜一直对动画不太熟悉,最近学习了一些关于动画的皮毛知识,网上资料很多,小菜按自己的理解整理一下。
Animation
Animation 可以生成动画过程中的值,生成的值并非单一的 double 也可以是 Size/Color 等;Animation 可以获取状态但无法获取屏幕显示内容。
AnimationController
AnimationController 小菜理解为 Animation 控制器,实际也是一个特殊的 Animation,在屏幕刷新时会生成一个新的值;使用时需要传递 vsync 值,用来防止屏幕外动画,vsync 值可以继承 TickerProviderStateMixin,若当前页面只有一个 controller 也可以用 SingleTickerProviderStateMixin;
AnimationController 有两个常用方法:
- forward() 方法用来开始动画,即从无到有;
- reverse() 方法用来反向开始动画,即从有到无;
动画分类
Flutter 提供了两种动画,分别是 Tween Animation 补间动画和 Physics-based Animation 基于物理动画;小菜理解为线性匀速动画和非线性动画;
TweenAnimation
Tween 动画是无状态的,只是在固定时间内均匀生成 begin 和 end 的值,通过 animation.value 来获取;
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);
Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(controller);
animation.addListener(() {
setState(() {});
});
CurvedAnimation
CurvedAnimation 的动画过程是非线性的,curve 种类很多,比较符合日常生活的物理过程,例如先快后慢或先增长到一个峰值再降低等;curve 的动画过程也可以自定义函数等;
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
无论是线性动画还是非线性动画,均可获取动画过程中的值,根据这个值可以灵活的使用在需要的场景;使用动画场景较多的是 透明度/旋转/缩放/平移 等。
AnimatedWidget
Flutter 很贴心的提供了自带动画属性的 Widget 极大的方便我们使用简单的动画,涵盖 透明度/旋转/缩放/平移 等常用的动画属性,使用时非常方便;但是缺点也相对明显,这些 Widget 属性相对专一,若需要多种动画属性不太适合;
简单介绍几个小菜日常使用的动画组件;
XXXTransition
FadeTransition 显隐性
FadeTransition(opacity: animation, child: FlutterLogo(size: 100.0))
ScaleTransition 缩放
ScaleTransition(scale: animation, child: FlutterLogo(size: 100.0))
RotationTransition 旋转
RotationTransition(turns: animation, child: FlutterLogo(size: 100.0))
Transform. XXX
Transform.scale 缩放
Transform.scale(scale: curve.value, child: FlutterLogo(size: 100.0))
Transform.rotate 旋转
Transform.rotate(angle: curve.value * pi, child: FlutterLogo(size: 100.0))
Transform.translate 平移
Transform.translate(offset: Offset(100.0 * curve.value, 0.0), child: FlutterLogo(size: 100.0))
AnimatedXXX
AnimatedOpacity 透明度
AnimatedOpacity(opacity: animation.value, duration: Duration(milliseconds: 2000), child: FlutterLogo(size: 100.0))
核心代码:
class _AnimationPageState extends State<AnimationPage03> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
CurvedAnimation curve;
bool isForward = false;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
animation = Tween(begin: 0.0, end: 1.0).animate(controller);
animation.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Animation Demo'),
),
body: Stack(children: <Widget>[
ListView(children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1, child: Center(child: Text('FadeTransition'))),
Expanded(
flex: 1, child: Center(child: Text('ScaleTransition')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: FadeTransition(
opacity: animation, child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: ScaleTransition(
scale: animation, child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1,
child: Center(child: Text('RotationTransition'))),
Expanded(
flex: 1, child: Center(child: Text('AnimatedOpacity')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: RotationTransition(
turns: animation, child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: AnimatedOpacity(
opacity: animation.value,
duration: Duration(milliseconds: 2000),
child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1,
child: Center(child: Text('Transform.translate'))),
Expanded(
flex: 1, child: Center(child: Text('Transform.rotate')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Transform.translate(
offset: Offset(100.0 * curve.value, 0.0),
child: FlutterLogo(size: 100.0))),
Expanded(
flex: 1,
child: Transform.rotate(
angle: curve.value * pi, child: FlutterLogo(size: 100.0)))
]),
Padding(
padding: EdgeInsets.all(5.0),
child: Row(children: <Widget>[
Expanded(
flex: 1, child: Center(child: Text('Transform.scale'))),
Expanded(flex: 1, child: Center(child: Text('Position')))
])),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Transform.scale(
scale: curve.value, child: FlutterLogo(size: 100.0))),
])
]),
posWid()
]),
floatingActionButton: new FloatingActionButton(
tooltip: 'Animation',
child: new Icon(Icons.lightbulb_outline),
onPressed: () {
isForward ? controller.reverse() : controller.forward();
isForward = !isForward;
}));
}
Widget posWid() {
return Positioned(
bottom: 16 + 314 * animation.value,
right: 16 + 84 * animation.value,
child: Container(child: FlutterLogo(size: 100.0)));
}
}
小菜对动画的研究不深,仅整理一些基本的动画方法,如有不对的地方希望多多指导!
Flutter 37: 图解 Flutter 基本动画 (一)的更多相关文章
- Flutter 38: 图解 Flutter 基本动画 (二)
小菜前两天学习了以下 Animation 的基本动画,接下来小菜学习以下稍微进阶版的 Animation 动画. 复合动画 小菜前两天学习的主要是基本的单一动画,当然多个动画效果集一身也是毫无问题的, ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- [Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)
前两天网友在群里说起了Flutter,就了解了一下,在手机上跑了它的demo,直接就被打动了. 虽然网上有很多教程,但真正开始的时候,还是会碰到很多坑.下面详细的讲解Flutter + Android ...
- Flutter编程:Flutter命令行的学习
1.创建 Flutter 工程 flutter create <output directory> D:\notebook\flutter\projects\ui_tutorial\lay ...
- Flutter学习(9)——Flutter插件实现(Flutter调用Android原生
原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...
- Flutter酷炫的路由动画效果
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...
- 【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过 ...
- Flutter 35: 图解自定义 View 之 Canvas (二)
小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...
- Flutter 34: 图解自定义 View 之 Canvas (一)
小菜最近在学习自定义 View,刚了解了一下 Paint 画笔的神奇之处,现在学习一下 Canvas 画布的神秘之处.Flutter 提供了众多的绘制方法,小菜接触不深,尽量都尝试一下. Canvas ...
随机推荐
- [ML] Roadmap: a long way to go
看上去不错的博文: 机器学习的经典算法一览 (一) 机器学习的经典算法一览 (二) 1.引言 正文将详细介绍传统机器学习算法,基本思想和用途.把问题解决思路和方法应用建议提前到这里的想法也 ...
- EasyUI之toolTip
<a class="easyui-tooltip" title="提示框" href="http://www.baidu.com"&g ...
- Flutter 状态管理 flutter_Provide
项目的商品类别页面将大量的出现类和类中间的状态变化,这就需要状态管理.现在Flutter的状态管理方案很多,redux.bloc.state.Provide. Scoped Model : 最早的状态 ...
- C#:获取控件对象在工具箱里的图标
工作上的需要.要写一个对控件操作的插件. 在插件中需要把设计器界面上的控件以树形结构列出来,配上控件在工具箱的图标.效果如图: 怎么能够获取到这个图标呢?下面用个例子说明. public Class ...
- Unity Shader基础(1):基础
一.Shaderlab语法 1.给Shader起名字 Shader "Custom/MyShader" 这个名称会出现在材质选择使用的下拉列表里 2. Properties (属性 ...
- Futter基础组件之二
一.线性布局之Row布局组件(以水平阵列显示其子级的小部件) 属性:Row({ TextDirection textDirection, 表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认为 ...
- 360再报丑闻,派遣黑客盗取ESET安全软件病毒库,法院已经介入调查
360再报丑闻,派遣黑客盗取ESET安全软件病毒库,联合法院已经介入调查.360于2019/3/10日通过非法途径试图盗取ESET安全软件100MB的病毒库,ESET立即反抗,360黑客电脑立即崩溃, ...
- 理解、学习与使用 JAVA 中的 Optional【转载】
这是一篇转载的文章.刚学java的时候看了好久这个Optional,但一直是懵的.今天又又遇到了,重新回来再看的时候,发现并没有那么难道那个. 转载的文章再开头处写了一个对于理解Optional很关键 ...
- 【计算机视觉】特征脸EigenFace与PCA
[计算机视觉]特征脸EigenFace与PCA 标签(空格分隔): [图像处理] 版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/lg1259156776/. 说 ...
- elasticsearch 映射 dynamic用法