首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter动画【2】

Flutter动画【2】

作者头像
flyou
发布2018-10-16 11:06:29
2K3
发布2018-10-16 11:06:29
举报
文章被收录于专栏:flutter开发者flutter开发者

前言

在上次的文章中我们学习了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用法,大家在下面可以多试试哦。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-05-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 flutter开发者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • AnimationWidgets
    • AnimatedContainer
      • AnimatedOpacity
        • AnimatedCrossFade
        • 小结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档