企业官网建设流程全解析

一文读懂 material-motion-compose 的五大 Material Motion 动效模式：从概念到实战

【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose

如果你正在用 Jetpack Compose 或 Compose Multiplatform 开发应用，却苦于页面切换动画生硬、手写动画代码繁琐，那么material-motion-compose绝对值得你花五分钟了解一下。它是 Material Motion 动效系统的 Compose 实现库，把 Material Design 官方定义的动效模式（Shared Axis、Fade Through、Fade、Elevation Scale、Hold）打包成开箱即用的 API，只需几行代码就能让 App 拥有专业、流畅的页面过渡体验。

什么是 Material Motion 动效系统？

Material Design 在 2018 年推出了「The Motion System」动效规范，目标是让界面元素的移动、缩放、淡入淡出遵循统一的物理规律，帮助用户理解元素之间的空间与层级关系。官方在 View 体系下有对应的实现，而material-motion-compose则把同一套规范带到了 Jetpack Compose 与 Compose Multiplatform（支持 Android、Desktop JVM、iOS、Wasm 四个平台），让 KMP 项目也能共用一套动效代码。

项目核心源码位于 core/src/commonMain/kotlin/soup/compose/material/motion/，详细的动效对照与用法文档可以参考 docs/core.md，每个动效都配有实时演示动图。

动效模式一：Shared Axis 共享轴——页面导航的首选

Shared Axis 是页面跳转最常见的动效，新旧页面沿同一根轴移动并淡入淡出，视觉连贯性极强。库提供了 X、Y、Z 三个方向：

轴方向	效果演示	典型场景
X 轴（水平）		列表到详情、同级页面切换
Y 轴（垂直）		层级向下钻取、展开面板
Z 轴（深度）		强调层级关系的进出场

使用MaterialSharedAxisX即可快速接入，核心实现参考 MaterialSharedAxis.kt：

val (screen, onScreenChanged) = remember { mutableStateOf(...) } MaterialSharedAxisX(targetState = screen, forward = true) { newScreen -> // 根据 newScreen 渲染对应页面 }

滑动距离默认 30dp（定义在 MotionConstants.kt），需要时可通过slideDistance参数调整。

动效模式二：Fade Through 淡入过渡——Tab 切换的优雅之选

Fade Through 的视觉特点是「内容几乎不动，只有透明度变化」，适合信息层级平行的场景，比如底部导航的 Tab 切换。它不会让用户产生「页面在移动」的错觉，观感非常克制、优雅。

MaterialFadeThrough(targetState = screen) { newScreen -> // 渲染对应 Tab 内容 }

对应入口为 MaterialFadeThrough.kt，动画规格在 animation/MaterialFadeThrough.kt 中定义。

动效模式三：Fade 淡入淡出——元素显隐的轻量方案

Fade 用于控制单个内容的显示与隐藏，例如加载状态、错误提示、弹层的出现与消失。它比 Fade Through 更轻量，只作用于visible布尔值，不涉及页面切换。

MaterialFade(visible = visible) { // 需要显隐的内容 }

实现基于 Compose 的AnimatedVisibility，默认进入 150ms、退出 75ms，见 MaterialFade.kt。

动效模式四：Elevation Scale 高度缩放——卡片聚焦的立体感

Elevation Scale 通过缩放 + 淡入淡出制造「从表面浮起」的立体感，非常适合卡片、对话框、全屏预览等强调层级抬升的场景，让焦点元素自然地从背景中「长」出来。

MaterialMotion( targetState = screen, motionSpec = { materialElevationScaleIn() with materialElevationScaleOut() } ) { newScreen -> ... }

动效模式五：Hold 保持——极简的「无动画」过渡

Hold 的意思是「保持现状」：内容在切换期间原地停留、不做任何位移动画。它适合需要快速切换、不希望用户被动画干扰的场景，比如数值刷新、轮播切换。代码实现也非常巧妙——进入时从透明度 1 开始，退出时停在 0.999，见 Hold.kt。

加餐：Circular Reveal 圆形揭示——惊喜的隐藏技能

除了五大动效模式，库还附带一个很好玩的Modifier.circularReveal，支持从任意圆点（默认是中心）以圆形裁剪的方式揭示内容，常用于相册、隐私内容等场景。通过center参数可以指定扩散起点：

Box(modifier = Modifier.circularReveal( visible = visible, center = { fullSize -> Offset(0f, 0f) } // 从左上角扩散 )) { ... }

实现源码在 CircularReveal.kt。

实战进阶：用 MaterialMotion 统一编排动效

如果觉得逐个 API 不够灵活，库还提供了统一入口MaterialMotion，配合motionSpec可以按状态自由组合不同的动效，甚至支持按targetState条件分流（前进用 Shared Axis、返回用 Fade Through），并可用pop参数控制反向动画：

MaterialMotion( targetState = screen, motionSpec = { when (targetState) { is Detail -> materialSharedAxisX(forward = true, slideDistance = slideDistance) else -> materialFadeThroughIn() with materialFadeThroughOut() } } ) { newScreen -> ... }

统一入口实现见 MaterialMotion.kt。所有动效的时长也可直接传入覆盖默认值，比如materialFadeThrough(durationMillis = 300)，常量默认值集中定义在 MotionConstants.kt。

快速接入步骤

1. 在项目的settings.gradle仓库配置中加入mavenCentral()。
2. 在依赖中添加io.github.fornewid:material-motion-compose-core:<version>。
3. 如需本地体验完整示例，可git clone https://gitcode.com/gh_mirrors/ma/material-motion-compose，仓库中的 sample/ 目录包含 Android、Desktop、iOS、Wasm 四个平台的完整 Demo，动效编排逻辑可参考 shared/。

总结

material-motion-compose 用最少的 API 覆盖了 Material Motion 动效规范的核心：Shared Axis 负责页面导航、Fade Through 负责 Tab 切换、Fade 负责元素显隐、Elevation Scale 负责层级抬升、Hold 负责极简过渡，加上 Circular Reveal 彩蛋，足以应对绝大多数界面动效需求。跨平台特性更是让它成为 Compose Multiplatform 项目的加分项。还在等什么？动手为你的 App 加一套丝滑的 Material Motion 动效吧！🚀

【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose