Material 3 卡片与动画 — 视觉连贯的细节
Material Design 3 是什么
Material Design 3（简称 M3，即 Material You）是 Google 截至 2024 年的最新设计规范。相比 Material Design 2，M3 最大的变化是：
- 动态色彩系统（壁纸驱动）
- 更大的圆角、更柔和的阴影
- Material 3 容器类型（不同层级的卡片容器）
- 滚动过渡动画（顶部 Tab 栏随滚动收缩）
- Compose 全量实现
Gloom 用 Jetpack Compose 从零构建 UI，所以完整吃到了 Material 3 的所有组件和动画。
Material 3 容器类型
M3 规范里定义了一套容器层级体系——不同层级的卡片有不同的背景色、圆角和阴影：
| 容器类型 | 典型用途 | 视觉特征 |
|---|---|---|
| Surface（基础面） | 页面背景、列表背景 | 无阴影、最小圆角 |
| Surface Variant | 次要组件背景 | 微透明、小圆角 |
| Card | 首页 Activity Feed、仓库卡片 | 有阴影、中等圆角 |
| Card Variant | 嵌套卡片 | 更轻阴影 |
| Filled Button | 确认/主要操作按钮 | 主色填充 |
| Outlined Button | 次要操作按钮 | 描边、透明背景 |
Gloom 在所有页面里正确地使用了每一种容器——首页 Activity Feed 用 Card，仓库详情页统计数字用 Filled Tonal 容器，Tab 栏用 Surface Variant。这些不是随便选的，完全按 M3 规范来。
滚动过渡动画
Material 3 的标志性动画之一：滚动时顶部 Tab 栏自动收缩。
以 Gloom 的仓库详情页为例：
- 初始状态：顶部导航栏高度较大，显示仓库名、作者头像、统计数字
- 向下滚动：顶部栏自动收缩，只保留仓库名和主要操作按钮，高度减小约 30-40%
- 向上滚动：顶部栏自动展开回初始高度
- 折叠动画：平滑过渡，不是瞬间跳变
这个效果在 GitHub 网页版上也有（桌面端滚动时导航栏固定），Gloom 在手机端的 M3 实现更精细——收缩/展开有缓动曲线，视觉上很连贯。
按钮点击动效
Material Design 的 ripple 波纹点击效果在 M3 里被升级：
- 点击按钮时从触点中心向外扩散圆形涟漪
- 涟漪颜色是 Material You 动态色板里的 ripple color（通常是主色的低透明度版本）
- 涟漪和按钮颜色有对比，不会看不见
- 多触点不会冲突（多点触控时每个触点独立涟漪）
Gloom 的所有可点击元素（按钮、卡片、列表项、图标）都有正确的 M3 ripple 效果。
加载态与空态动画
Material 3 对加载中和空状态也有动画规范：
- 加载 Spinner：M3 规范的圆形旋转指示器，颜色从 Material You 调色板取
- 下拉刷新动画：经典的旋转箭头 → 刷新动画，跟随滚动手势
- 空状态：干净的空状态页面（没有 Star 时的 Starred 列表、没有关注时的首页），配合 M3 主题色
Compose 带来的便利
Gloom 用 Compose 构建 UI，意味着：
- M3 组件是 Jetpack Compose Material 3 库的内置组件——直接调用
- 动画是声明式的（
animateColorAsState、animateDpAsState等），不需要手动写 ValueAnimator - 主题切换（深浅色、动态取色）自动触发重组，所有颜色一键更新
相比传统 View 系统写的应用，Compose 让 Gloom 的 M3 实现更完整、更一致、更不容易漏细节。