《Flutter 动画系列二》Google工程师带你选择Flutter动画控件

对初学者来说,看完这篇文章,我想你脑瓜子一定是嗡嗡的,这都说的是什么啊。

不要急躁,开始的我和你是一样的,第一遍看完,完全不知道在说什么,不明白不要紧,请先收藏此文章,然后先去学习下Flutter内置的25种动画组件。

地址:http://laomengit.com/flutter/module/animated_1/

不要仅仅是看,要多写,只有写才能发现问题。

当你对动画控件有了一定的了解,在回过头来细细的品一品这篇文章,你会有不一样的感受,你品,你细品。

这篇文章的内容是Google 的Flutter工程师Emily原创,我仅仅是翻译,原创地址:https://www.youtube.com/watch?v=GXIJJkq_H8g

从广义上来说,Flutter动画组件分为两种类型,

  • Drawing-based animations:基于绘制的动画,就像是画画一样,通常都是独立的控件,例如游戏角色或者很难用纯碎的代码来完成的效果。
  • Core-based animations:基于核心的动画,它面向组件,基于标准的布局和样式,从本质上说,倾向于增强控件的外观和过渡效果,而不是自己充当独立的控件。

想一想你的动画是基于绘制的,还是基于核心(组件)的:

  • 如果是基于绘制的,而且你的团队中有专门的设计人员提供素材,建议你使用第三方工具,比如Rive和Lottie,这些库可以方便的导入资源来构建动画。
  • 如果是基于核心(组件)的,涉及组件的变化,比如颜色、形状、位置的变化等。

在Flutter中基于核心(组件)的动画又分为两类:

  • 隐式动画控件:只需提供给组件开始、结束值,系统执行动画,比如AnimatedAlign等组件。
  • 显式动画控件:需要设置AnimationController,控制动画的执行,使用显式动画可以完成任何隐式动画的效果,甚至功能更丰富一些,不过你需要管理该动画的AnimationController生命周期,AnimationController并不是一个控件,所以需要将其放在stateful 控件中。

从上面的分类中,我们不难看出,使用隐式动画控件,代码更简单,而且无需管理AnimationController的生命周期。

如何确定使用隐式动画控件还是显式动画控件?你需要考虑3个问题:

  • 动画是否一直重复,比如音乐播放。
  • 动画值是否不连续,比如一个圆圈,不连续的尺寸变化:小->大,小->大,小->大。连续的尺寸变化:小->大->小->大。
  • 是否有多个组件一起动画。

如果你对这三个问题中的任何一个回答“是”,那么你需要使用显式动画控件,否则你就使用隐式动画控件。

一旦你确定了使用显式动画控件或者隐式动画控件,这个时候你就需要找到对应的组件,你需要的组件是否已经在Flutter中内置了?

对于隐式组件来说:

  • 已经内置:直接使用,当然也可以看下AnimatedContainer组件,AnimatedContainer是非常强大且用途广泛的动画组件。
  • 未内置:可以使用TweenAnimationBuilder创建一个自定义的动画控件。

对于显示组件来说:

  • 内置:直接使用相关组件,比如xxxTransition组件。
  • 未内置:自定义一个动画控件。

自定义一个显式的动画组件需要确认这个动画组件是单独一个组件还是组件的一部分,

  • 单独一个显示组件:你应该继承 AnimatedWidget来实现。
  • 组件的一部分:使用AnimatedBuilder来实现。

还有最后一件事情需要考虑:如果你发现由CustomPainter引起的性能问题,你可以像AnimatedWidget一样使用它,但是CustomPainer直接绘制到画布上,而无需标准的小部件构建范例,如果使用的好,可以创建一些整洁、丰富的自定义的效果或者节省性能,但如果使用的不好,你的动画可能引起更多的性能问题,就像是手动管理内存一样,要处理好共享指针,为什么要用这样用,是否有内存问题,这些问题都要考虑清楚。

最后总结如下图:

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

原文地址:https://blog.51cto.com/11206976/2484813

时间: 2024-11-09 03:40:58

《Flutter 动画系列二》Google工程师带你选择Flutter动画控件的相关文章

Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右

(转载) Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 标签: Android清除功能EditText仿IOS的输入框 2013-09-04 17:33 70865人阅读 评论(57) 收藏 举报  分类: Android UI设计(7)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEdit

iOS系列 基础篇 09 开关、滑块和分段控件

iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块控件(Slider)和分段控件(Segmented Control)都是UIControl的子类,本篇我们将通过一个案例和大家一起学习这三个控件的使用. 如下图所示,本案例包括两个开关控件Switch.一个分段控件(Segmented Control).两个标签(Label)和一个滑块控件(Slid

带农历日历的DatePicker控件!Xamarin控件开发小记

原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePicker Mato.DatePicker 说明 这是一个带有农历日历的日期选择Xamarin控件 可以指定初始日期 多选和单选日期 引用 PCL:https://www.nuget.org/packages/Mato.DatePicker.PCL/ Android:https://www.nuget

WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> <local:PathToSource x:Key="n2"/> <Style x:Key="{x:Type ContextMenu}" TargetType="{x:Type ContextMenu}"> <Setter Pr

Android 带清除功能的输入框控件ClearEditText

今天给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右设置图片,所以我们可以利用属性android:drawableRight设置我们的删除小图标,如图 我这里设置了左边和右边的图

Android 带清除功能的输入框控件EditText

今天学习了自定义控件,然后自己做了一个用户登录小控件EditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText. 先说明一下,我是用Android studio写的,代码已经共享到我的github上了,有需要的可以去下载. 我们可以为我们的输入框在上下左右设置图片,所以我们可以利用属性android:drawableRight设置我们的删除小图标,如

google官方提供的下拉刷新控件SwipeRefreshLayout

摘自:http://www.stormzhang.com/android/2014/03/29/android-swiperefreshlayout/ SwipeRefreshLayout SwipeRefreshLayout字面意思就是下拉刷新的布局,继承自ViewGroup,在support v4兼容包下,但必须把你的support library的版本升级到19.1. 提到下拉刷新大家一定对ActionBarPullToRefresh比较熟悉,而如今google推出了更官方的下拉刷新组件,

使用katalon自带Spy功能获取/验证控件Selector、XPath

背景 最近刚接手一个katalon编写的UI自动化项目,页面最近刚改版,已有用例很多查找元素失败.了解到katalon元素定位支持xpath,所以直接使用chrome开发者工具打开目标页面+获取xpath,进行xpath更新,更新后的xpath还是经常定位元素失败. 网上搜索资料后,发现katalon自带的Spy功能就是用于Objects的Selector.Xpath获取和校验,非常好用. 获取object的Selector.Xpath (1)点击自带的Spy Web/Spy Mobile (2