Flutter动画介绍


设计优良的动画使得UI更加直观,有助于使app更加精美和流畅,提升用户体验。Flutter的动画支持使得它更加容易地实现丰富的动画类型。许多widget,特别是在设计规范中就定义了标准的动效的Material widgets,都可以自定义动画效果。

以下两处是开始学习Flutter动画框架很好的资源,每个文档都一步一步的指导您如何写动画。

  • Animations toturial
    通过使用动画api的不同方面引导您完成补间动画的这一过程,来解释Flutter 动画包中的基础类(controllers,Animatable,curves,listeners,builders)。
  • Flutter 0到1,part1, part2
    如何使用补间动画创建动画的图表。
  • Building Beautiful UIs with flutter
    Codelab 演示如何构建一个简单的聊天app。 Step 7 (Animate your app)演示了如何为新消息添加一个动画——从输入区域向上滑入到消息列表中。

动画Animation的类型

Animation无非就两种类型,基于补间的或基于物理的。下面的章节解释了这些术语,并向您介绍可以进一步了解的资源。在某些情况下,我们目前最好的文档是Flutter gallery中的示例代码。

补间动画

Tween是in-betweening的简写形式,即‘补间’。在一个补间动画中,定义了起点和终点,时间轴,以及时间和速度的变化曲线。框架计算如何从起点变化到终点。
上面列出的文档,例如animation tutorial并不是关于补间的,但是在它们的例子中使用补间。(额。。。)

物理动画

在物理动画中,采用运动建模以模拟现实世界的行为。例如,当你掷一个球时,球着陆的时间和地点取决于它被抛出时的起始速度,它在球场的位置。相似地,一个球挂在弹簧上,和一个球挂在绳子上,做落体运动,它们的下降情况是不一样的。

常见动画模式

多数UX或者动画设计师设计UI时,总是寻找可以反复使用的动画模式。这一节列出一些通常使用的动画模式,并告诉你哪里可以了解更多。

动画list或grid

该模式包括向list或grid中添加和移除元素。

  • AnimatedList example
    Sample App Catalog这个例子展示了在list中添加或者移除一项时,如何做动画。当用户使用(+) 或(-)按钮来修改这个列表时,内部的Dart list会被同步。

过渡共享元素(转场动画)

在这种模式中,用户从一个页面中选中一个元素,通常是一个图片,然后这个UI元素动画过渡到一个新的详情页。在Flutter中,你可以在路由(routes)间使用Hero widget以轻易的实现共享元素的过渡动画,在这种场景下,做动画的widget被称作hero。

  • Hero Animations 如何创建两种风格的Hero 动画:
    – hero从一个页面飞到另外一个页面,并改变位置和大小。
    – hero从一个页面飞到另外一个页面,改变hero的形状,例如从圆形变换到方形。
  • Flutter Gallery
    你可以自己构建Gallery app,或者从Play Store下载下来。Shrine demo 包括了Hero 动画的例子。
  • 可以参看HeroNavigator,和PageRoute 类的API文档。

交错(staggered)动画

一个动画被拆分成若干个小的动作,一些动作会被延迟。这些更小的动画也许是连续的,或者是局部的,或者完全就是交错的。

其他资源

了解更多关于Flutter 动画的资源:

展开阅读全文

没有更多推荐了,返回首页