Flutter动画【2】

前言

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的Wdiget属性我们可以做出我们想要的效果。

但是在一般的场景下,这样做事比较麻烦的。因为我们每次都要侯建这个Animation并且与Widget的属性相绑定。

所以在一般情况下我们并不直接使用Animation。

AnimationWidgets

在Flutter内部为们提供了很多的动画Wdiget,比如AnimatedContainer、AnimatedCrossFade、AnimatedOpacity、AnimatedSize、AnimatedPositioned等等。

现在我们看下如何来使用这些基于动画的Widget

AnimatedContainer

AnimatedContainer看名字不难知道它是Container的动画版本,使用AnimatedContainer就不需要再创建Animation了。

AnimatedContainer继承于ImplicitlyAnimatedWidget,相应的我们需要传入动画的播放时间(必须填写)和插值器类型(有默认值)

然后,我们就可以让AnimatedContainer根据我们的值来做动画效果并且作用到相应的属性上。

所以还是看个例子吧

可以看见我们在Column的第一个Widget中放了一个AnimatedContainer,指定了插值器的类型为Curves.bounceOut并且指定动画时长为3秒。

我们设置AnimatedContainer的底部padding的默认值为100.0,这样动画就会根据我们设置的值去改变底部padding,当我们点击按钮时就会改变设置的padding值来从新开始动画。

当然,大家可以试下其他属性比如颜色、大小等。

AnimatedOpacity

接下来我们来看下改变透明度的动画Widget,可以child根据设置的时间和动画范围改变透明度。

同样的AnimatedOpacity也继承于ImplicitlyAnimatedWidget,需要填入Curve和Duration参数。

依旧来看代码吧:

上面的代码类似,我们在Column的第一个元素上放置了一个AnimatedOpacity,指定动画的插值器类型为线性的,指定动画时长为3秒,透明度的最小值为0.0。

当我们点击按钮时,透明度的值就会在0.0到1.0之间切换了。

AnimatedCrossFade

AnimatedCrossFade允许一个Widget到另为一个Widget使用渐变的改变。

与 AnimatedOpacity和AnimatedContainer不同,AnimatedCrossFade直接继承于StatefulWidget,构造方法必须要传入两个不同的Widget,当然你也可以指定每个widget的动画差值器。

来看下效果吧。

其实就是类似于视频编辑时第一帧到第二帧渐变动画而已。

好吧,还是来看下如何实现。

我们定义了两个FlutterLogo,使用不同的大小和logio样式,让AnimatedCrossFade来处理中间的过渡,我们并不需要关心中间的过程。

小结

使用系统提供的AnimationWidgets可以很方便的实现Widget的动画效果,在做一些简单的动画时还是非常有用的。

当然在flutter中还为我们提供很多其他的动画效果如AnimatedPositioned、AnimatedSize、SlideTransition、SizeTransition、ScaleTransition、otationTransition等动画效果,前两者与今天讲到的类似,其他的类似于上期的AnimatedWidget用法,大家在下面可以多试试哦。

原文发布于微信公众号 - flutter开发者(Flutter_Developers)

原文发表时间:2018-05-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4059
来自专栏liulun

riot.js教程【五】标签嵌套、命名元素、事件、标签条件

前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs...

3728
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

6019
来自专栏微信小程序开发

理解jquery的$.extend & $.fn.extend用法

jQuery为开发插件提拱了两个方法,分别是: 1、jQuery.fn.extend(); //dom方法 2、jQuery.extend(); // 工具...

3319
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2699
来自专栏Angular&服务

数据绑定

1113
来自专栏smy

css控制标题长度超出部分显示省略号

width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

34012
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1879
来自专栏柠檬先生

jquery的基本选择器

关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所...

2069
来自专栏HTML5学堂

详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”...

3237

扫码关注云+社区

领取腾讯云代金券