Flutter 运动过渡

一个演示 Material 运动系统的 Flutter 应用。

Material 运动系统

四种主要的 Material 过渡模式如下:

容器变换

包含容器的 UI 元素之间的过渡;通过将一个元素无缝地转换为另一个元素,在两个不同的 UI 元素之间创建可见的连接。

共享轴

在具有空间或导航关系的 UI 元素之间的过渡;使用 x、y 或 z 轴上的共享变换来加强元素之间的关系。

淡入淡出

在彼此之间没有强关联的 UI 元素之间的过渡;使用顺序的淡出和淡入,并对进入的元素进行缩放。

淡入淡出

用于进入或退出屏幕边界的 UI 元素。

应用功能

  1. 在主页显示一个模拟消息列表。

  2. 实现一个动画底部应用栏。

  1. 从设置底部工作表动态更改应用主题。

  1. 从设置更改应用动画速度。

  1. 实现底部抽屉菜单。

过渡动画

动画名称 截图
容器变换过渡(列表到详情页)
从 FAB 到创建页面的容器变换过渡
从搜索图标到搜索页面的共享 Z 轴过渡
淡入淡出过渡
主题过渡

UI 灵感来自 Reply 应用

GitHub

查看 Github