Flutter 运动过渡
一个演示 Material 运动系统的 Flutter 应用。
Material 运动系统
四种主要的 Material 过渡模式如下:
容器变换
包含容器的 UI 元素之间的过渡;通过将一个元素无缝地转换为另一个元素,在两个不同的 UI 元素之间创建可见的连接。
共享轴
在具有空间或导航关系的 UI 元素之间的过渡;使用 x、y 或 z 轴上的共享变换来加强元素之间的关系。
淡入淡出
在彼此之间没有强关联的 UI 元素之间的过渡;使用顺序的淡出和淡入,并对进入的元素进行缩放。
淡入淡出
用于进入或退出屏幕边界的 UI 元素。
应用功能
-
在主页显示一个模拟消息列表。
-
实现一个动画底部应用栏。
- 从设置底部工作表动态更改应用主题。
- 从设置更改应用动画速度。
- 实现底部抽屉菜单。
过渡动画
| 动画名称 | 截图 |
|---|---|
| 容器变换过渡(列表到详情页) | ![]() |
| 从 FAB 到创建页面的容器变换过渡 | ![]() |
| 从搜索图标到搜索页面的共享 Z 轴过渡 | ![]() |
| 淡入淡出过渡 | ![]() |
| 主题过渡 | ![]() |
UI 灵感来自 Reply 应用








