Flutter动画介绍

最新推荐文章于 2022-07-22 17:13:01 发布

xidian_wutao

最新推荐文章于 2022-07-22 17:13:01 发布

阅读量292

点赞数

分类专栏： flutter Animation 动画文章标签： Flutter 动画

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

设计优良的动画使得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并不是关于补间的，但是在它们的例子中使用补间。（额。。。）

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

Flutter Gallery
在Material Components下，Grid例子示范了一个fling（惯性，扔）动画。从grid中选择一张图片并放大。你可以使用fling或者拖拽手势来平移图片。
也可参阅AnimationController.animateWith 和 SpringSimulation 文档。

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

该模式包括向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 动画的例子。
可以参看Hero，Navigator，和PageRoute 类的API文档。