专栏首页flutter开发者Flutter动画【1】

Flutter动画【1】

Hello 好久不见,我没消失,这不,又给大家更新教程了,笔芯

在前面的文章中我们花了很多的时间去讲了Flutter中的Widget以及用户操作,但是我们却很少去关注与用户的交互效果,当然这并不会导致我们的程序崩溃或者不能实现某个功能,但是它真的会使我们应用程序没有“灵性”,总让人觉得少了些什么,对啊,动画!

说到动画,相比大家对动画都不陌生,当然可能最先接触的应该是flash吧,一般指的是从一种状态到另一种状态的改变,或者说大小、形状、位置的改变。

在Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画,由于篇幅原因我们今天就先来看下补间动画,当然也是我们接触比较多的动画类型。

补间动画的基本支持类

在Flutter中Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值,没错它仅仅用来生成动画的值,这些值并不会直接没改变界面的展示效果。

Animation对象知道动画的当前状态(例如,它是开始、停止还是向前或向后移动),但它不知道屏幕上显示的内容。

在Flutter中我们使用AnimationController来管理动画,控制动画的开始、结束与快慢。

CurvedAnimation 可以说是动画的插值器,负责控制动画的行为,如是先快再慢还是先快再慢等。

入门补间动画

Animation在Flutter中是一个抽象类,我们并不能直接来是使用它,但是我们可以使用Tween这个子类来使用它。

我们可以使用addListener回调来监听动画值的改变,可以使用addStatusListener回调来监听动画状态的变更

刚刚我们说过,使用Animation并不能直接改变Widget,它只能生成一系列的值,那么到底是不是这样呢?我们还是看个例子

每次我们点击floatingActionButton都会触发动画开始的操作,然后通过监听把当前动画的值打印到控制台上。

上面的代码很简单,我们在Widget初始化时建立了一个AnimationController对象用来控制动画的播放,并设置动画时长为2秒

然后我们建立一个Tween动画,从0.0开始到100.0结束,并且给动画设置监听,动画的值改变时都会触发print方法,把当前的值打印在控制台上。

控制台输出:

I/flutter ( 6616): 0.0 I/flutter ( 6616): 1.38355 I/flutter ( 6616): 2.2180999999999997 I/flutter ( 6616): 3.05225 I/flutter ( 6616): 3.88295 I/flutter ( 6616): 4.7136499999999995 I/flutter ( 6616): …… I/flutter ( 6616): 99.87325 I/flutter ( 6616): 100.0

好吧,我们还是把动画的值设置给floatcationbar再来看下效果。

实现起来也很简单只不过是把floatingActionButton的child变成了一个Text而已。

AnimatedWidget

在上面的例子中我们必须需要通过addListener来获得对动画值变化的监听,但是通过AnimatedWidget我们可以直接获得动画的值并赋值给相应的Widget

其实使用起来也非常的简单,只不过我们自定义了一个AnimationText继承于AnimatedWidget来获得对动画的监听并给Text赋值,当然程序的运行效果跟上面的例子是一样的。

控制View的大小

在上面的例子中我们通过动画的值来改变了Text显示的值,现在我们来试下改变View的大小。

其实实现起来很简单,只是把动画的值赋值给Widget的宽和高而已(官方例子)

动画状态监听

在前面的例子中我们使用ddListener来监听动画值的改变,这里我们使用aaddStatusListener来监听动画状态的变更。

我们监听动画的状态变更,当动画结束时我们反转动画,当动画的反转也结束后我们从新开始动画,这样动画就会一直这样循环下去。

CurvedAnimation

接下来我们来看下CurvedAnimation,通过CurvedAnimation我们可以实现动画的非线性播放,比如先快后慢

先慢后快

实现起来也很简单,我们只需要把CurvedAnimation传递给Tween即可,另外这个例子中我们使用AnimatedBuilder来构建动画Widget,其实跟前面的AnimatedWdiget是类似的。

Curves类中有很多内置的非线性动画效果,大家可以在下面自己试下,当然 大家也可以根据自己的需要定制属于自己的非线性动画效果

动画的并行运行

当然我们有时候需要多个动画同时作用的效果,比如大小的改变和透明度的改变

每一个Tween管理动画的一种效果。例如:

你可以通过sizeAnimation.value来获取大小,通过opacityAnimation.value来获取不透明度,但AnimatedWidget的构造函数只接受一个动画对象。 为了解决这个问题,该示例创建了自己的Tween对象并显式计算了这些值。

其build方法.evaluate()在父级的动画对象上调用Tween函数以计算所需的size和opacity值。

好吧,今天先写这么多吧,大家在下面要多多练习哈

我怀疑这个是个坏掉的二维码,分享到朋友圈试试?

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:flyou

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-13

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter动画【2】

    在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

    flyou
  • 自定义View案例【CircleProgressBar】

    在前面的文章中我们看了下如何通过自定义View简单实现了labelView的效果,其实实现起来非常的简单,就是根据用户传递来的参数来做不同的绘制而已。

    flyou
  • ​Flutter中异常处理

    Dart是单进程机制,所以在这个进程中出现问题时仅仅会影响当前进程,在事件循环中,当某个任务发生异常并没有被捕获时,程序并不会退出,而直接导致的结果是当前任务的...

    flyou
  • iOS学习——核心动画

      Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

    mukekeheart
  • Flutter 动画看这篇彻底学通

    静态的画面之所以能够运动,正是基于这一原理。具体应用则是电影放映,动画片播放等场景。

    arcticfox
  • 前端基础-jQuery动画效果

    cwl_java
  • [Android技术专题]动画那点小秘密

    在Android应用开发中我们每天都在接触动画(Activity开、关,页面滑动、点击按钮等都有动画效果),但入门容易,真正做好很难。如果要把效果做得自然、看...

    open
  • Web高性能动画及渲染原理(1)CSS动画和JS动画

    Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的。CSS动画简洁高效,提升交互体...

    大史不说话
  • 中国第五届CSS大会分享:CSS TIME

    懵懂少年有幸受邀参加3.30中国第五届CSS大会分享,感谢业界大咖的不嫌弃,鉴于CSS的更新频率不及JS各种迭代高,新的特性组织起来对于分享的主题会比较散,所以...

    腾讯技术工程官方号
  • 【iOS开发】iOS 动画详解

    在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

    吴老师

扫码关注云+社区

领取腾讯云代金券