flutter 动画_Flutter 中文文档:动画效果介绍

2393b76d24490e9077615b040175d3da.png

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

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

  • 在 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 补间动画

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

上文列出的文档,比如 在 Flutter 应用里实现动画效果 并不是特别针对补间动画的,但是其示例中使用了补间动画。

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

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 目录。

ae8a7dad4713b8ae48041c512399774f.png

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> 本课程将使用 flutter 实现类似抖音首页面效果 </p> <p> <br /></p> <p> </p><ol><li> <span style="color:#64451D;"> </span><span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> TabBar </span><span style="color:#64451D;font-size:13px;">与</span><span style="color:#64451D;font-size:13px;"> TabBarView </span><span style="color:#64451D;font-size:13px;">结合使用</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">实现仿抖音</span><span style="color:#64451D;font-size:13px;">APP</span><span style="color:#64451D;font-size:13px;">首页面</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">关注</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">与推荐</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">页面左右滑动</span><span style="color:#64451D;font-size:13px;">ui</span><span style="color:#64451D;font-size:13px;">构建</span> </li> <li> <span style="color:#64451D;">通过</span><span style="font-size:13px;color:#64451D;"> PageView </span><span>来实现上下整屏切换效果</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">使用 </span><span style="color:#64451D;">VideoPlayer</span><span>组件实现视频播放功能</span></span> </li> <li> <span><span style="font-size:13px;color:#64451D;">通过 CircularProgressIndicator实现 </span></span><span style="color:#64451D;">有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停,并会综述一个</span><span style="font-size:13px;color:#64451D;"> Align </span><span>在手机坐标系中的对齐方式</span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> ClipOval</span><span style="color:#64451D;font-size:13px;">、</span><span style="color:#64451D;font-size:13px;">CachedNetworkImage </span><span style="color:#64451D;font-size:13px;">实现圆形头像</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">通过</span><span style="color:#64451D;"> showModalBottomSheet </span><span>实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;"> ListView </span><span>实现弹框显示评论列表功能</span></span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> showModalBottomSheet </span><span style="color:#64451D;font-size:13px;">实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;font-size:13px;"> GridView </span><span style="color:#64451D;font-size:13px;">实现弹框显示九宫格列表功能</span> </li> </ol>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页