Flutter 中文文档:动画效果介绍

640?wx_fmt=jpeg

以轻松实现各种动画类型。许多 widgets 尤其是 Material widgets,在其设计规范定义中都自带标准动画效果,不过也支持定制效果。

通过下面的资源可以很好的学习 Flutter 动画框架。这些文档循序渐进地讲解如何编写动画代码。

  • 阐释了 Flutter 动画包中的基本类(控制器,动画,曲线,监听器,构建器),这些可以帮助您使用不同的动画 APIs 完成补间动画。

  • 使用 Flutter 从零到一, 第一部分 和 第二部分Medium 文章中有介绍如何使用补间动画创建图表动画。

    第一部分:https://medium.com/flutter/zero-to-one-with-flutter-43b13fd7b354

    第二部分:https://medium.com/flutter/zero-to-one-with-flutter-part-two-5aa2f06655cb

1. 动画类型

动画分为两类:补间动画和基于物理动画。下面将解释这些术语的含义,并帮助您找到更多相关资源。在一些情况下,我们现有的最佳文档是 Flutter gallery 中的示例代码。

1.1 补间动画

补间动画是“介于两者之间”的缩写。 在补间动画中,定义了起点和终点以及时间轴,再定义过渡时间和速度的曲线。 然后框架会计算如何从起点过渡到终点。

上文列出的文档,比如  并不是特别针对补间动画的,但是其示例中使用了补间动画。

在基于物理基础的动画中,动作是模拟真实世界的行为来进行建模的。举个例子,当您抛球时,球落地的时间和位置取决于抛出的速度和距离地面的高度。类似地,附在弹簧上的球和附在绳子上的球掉落(和反弹)方式是不一样的。

1.2 基于物理基础的动画

Flutter Gallery:

https://github.com/flutter/flutter/tree/master/examples/flutter_gallery

在 Material 组件 下,Grid 示例 演示了一个抛物动画。从网格中选取一个图像并放大。您可以通过使用投掷和拖动来平移图像。

Grid:https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/grid_list_demo.dart

请参考 API 文档 

AnimationController.animateWith:

https://api.flutter-io.cn/flutter/animation/AnimationController/animateWith.html

SpringSimulation:

https://api.flutter-io.cn/flutter/physics/SpringSimulation-class.html

2. 常见动画模式

多数 UX 或动画设计人员会发现在设计 UI 时,经常重复使用某些动画模式。本章列举了一些常用的动画模式,并提供更多学习路径。

2.1 列表或网格动画

这种模式用于在列表或网格中添加或删除元素。

  • AnimatedList example这个来自 Sample App Catalog 的演示展示了如何动态添加元素至列表或删除选定元素。当用户使用 plus (+) 和 minus (-) 按钮修改列表时,会同步到内部 Dart 列表。

2.2 共享元素转换

在这个模式中,用户从页面中选择一个元素,通常是图像,然后 UI 会在新页面中为指定元素添加动画,并生成更多细节。在 Flutter 中,您可以通过 Hero widget 轻松实现路径(页面)间的共享元素转换动画。

  • Hero Animations 如何创建两种风格的 Hero 动画:

    • 当改变位置和大小时,Hero 从一页飞至另一页。

    • Hero 的边界改变形状由圆变方,同时从一页飞至另一页。

  • Flutter Gallery您可以自己自己创建 Gallery 应用程序,或者到 Play 商店中下载。Shrine 演示中有关于 Hero 动画的示例。

2.3 交织动画

动画被分解成较小的动作,其中一些动作被延迟。这些小动画可以是连续的,也可以部分或完全重叠。

交织动画

链接:https://flutter.cn/docs/development/ui/animations/staggered-animations

3. 其他资源

以下链接可以了解更多 Flutter 动画:

动画及动作 widgets

链接:https://flutter.cn/docs/development/ui/widgets/animationFlutter APIs 提供的动画 widgets 目录。

640?wx_fmt=png

猜你喜欢

转载自blog.csdn.net/weixin_43459071/article/details/102597930