MaterialSharedAxis 共享轴转场动画实战：用 material-motion-compose 实现 X/Y/Z 轴页面切换
MaterialSharedAxis 共享轴转场动画实战用 material-motion-compose 实现 X/Y/Z 轴页面切换【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose开发 Jetpack Compose 应用时页面切换动画生硬是很多新手头疼的问题。material-motion-compose 是一款专为 Jetpack Compose 和 Compose Multiplatform 打造的 Material Motion 动效库其中MaterialSharedAxis 共享轴转场动画是 Material Design 规范中最经典的页面切换方案。本文将以实战方式带你快速掌握如何用 material-motion-compose 一行配置实现 X 轴、Y 轴、Z 轴三种共享轴页面切换动画。MaterialSharedAxis 共享轴转场动画是什么共享轴转场Shared Axis是 Material Design 动效系统Motion System里的核心模式两个页面在空间上存在轴线关系切换时沿这条轴线滑动过渡让用户一眼就感知到页面在前进还是后退。material-motion-compose 把这一规范完整移植到了 Compose 世界同时支持Android、桌面端JVM、iOS 和 Wasm四大平台。这个库除了共享轴还内置了MaterialFade、MaterialFadeThrough、Hold、MaterialElevationScale、CircularReveal等多种 Material 动效。核心实现位于 core/ 模块官方使用文档见 docs/core.md源码结构清晰非常值得阅读。三种轴切换效果有什么区别X/Y/Z 轴动画效果对比MaterialSharedAxis一共有三个变体对应三条不同的空间轴线效果差异非常直观轴动画效果演示适合场景X 轴列表页 ↔ 详情页等左右层级切换Y 轴上下展开、收起类层级关系Z 轴强调纵深感的页面跳转视觉冲击最强简单总结就是X 轴水平滑、Y 轴垂直滑、Z 轴缩放叠。Z 轴没有滑动距离参数它通过缩放前进时 0.8 → 1.0后退时 1.1 → 1.0配合淡入淡出来营造纵深空间感。快速上手三步实现共享轴转场动画第一步添加依赖在build.gradle中加入 Maven Central 依赖即可repositories { mavenCentral() } dependencies { implementation io.github.fornewid:material-motion-compose-core:2.0.0 }第二步一个组合函数搞定 X 轴切换val (screen, onScreenChanged) remember { mutableStateOf(0) } MaterialSharedAxisX( targetState screen, // 状态一变动画自动触发 forward true, // true 前进false 后退 slideDistance 30.dp, // 可选默认 30dp ) { index - // 根据 index 渲染不同页面 ScreenContent(index) }第三步理解 targetState 与 forwardtargetState就是动画的开关每次值改变旧内容淡出、新内容淡入动画自动播放。forward控制滑动方向后退时传入false即可让页面反向滑回返回手势体验非常自然。三个轴的组合式 API 定义都在 MaterialSharedAxis.kt 中用法完全一致。更灵活的写法MaterialMotion materialSharedAxis 函数如果需要在不同状态下使用不同动效可以用底层一点的MaterialMotion配合transitionSpec按需动态选择 X/Y/Z 轴val slideDistance rememberSlideDistance(slideDistance 30.dp) MaterialMotion( targetState screen, transitionSpec { when (direction) { Direction.X - materialSharedAxisX(forward forward, slideDistance slideDistance) Direction.Y - materialSharedAxisY(forward forward, slideDistance slideDistance) Direction.Z - materialSharedAxisZ(forward forward) } }, pop forward.not(), // 是否按倒序渲染内容 ) { index - ScreenContent(index) }注意slideDistance需要通过rememberSlideDistance()把 dp 转成像素。这个组合切换的完整示例就在 MaterialSharedAxisScreen.kt 里官方示例还提供了单选按钮可以实时切换 X/Y/Z 轴体验效果强烈建议 clone 下来跑一跑。进阶在 Navigation Compose 中实现页面切换动画共享轴动画不止用于页面内切换还能直接接入 Navigation Compose 的导航转场。参考官方示例 AnimatedNavHostScreen.kt只需配置四个转场参数NavHost( navController navController, startDestination home, enterTransition { materialSharedAxisXIn(forward true, slideDistance slideDistance) }, exitTransition { materialSharedAxisXOut(forward true, slideDistance slideDistance) }, popEnterTransition { materialSharedAxisXIn(forward false, slideDistance slideDistance) }, popExitTransition { materialSharedAxisXOut(forward false, slideDistance slideDistance) }, ) { composable(home) { HomeScreen() } composable(detail) { DetailScreen() } }这样点击进入详情页是向右滑入返回时自动反向滑出整个 App 的导航手感瞬间专业起来。底层动画实现滑动 淡入淡出的组合都在 animation/MaterialSharedAxis.kt 中想研究实现细节可以翻阅。自定义动画参数的实用技巧调整时长直接传durationMillis例如materialSharedAxisX(forward true, slideDistance distance, durationMillis 500)单位毫秒。调整滑动距离slideDistance默认是 30dp数值越大滑动越明显可通过rememberSlideDistance(60.dp)修改。默认值参考库默认时长 300ms、滑动距离 30dp定义在 MotionConstants.kt 中想全局统一风格可以参照修改。常见问题排查动画方向反了检查forward是否与页面层级一致前进传true、返回传false。Z 轴没有滑动距离参数这是正常的Z 轴只用缩放 淡入淡出表达纵深不需要slideDistance。页面切换一闪而过确认targetState确实发生了变化状态没变动画不会触发另外检查是否忘了传pop参数。小结共享轴转场是 Material 动效体系中最实用的页面切换方案而 material-motion-compose 让它从需要自己手写动画变成了一个组合函数搞定。X 轴水平滑、Y 轴垂直滑、Z 轴纵深缩放配合 Navigation Compose 接入导航后你的 Compose 应用在 Android、桌面、iOS 上都能拥有统一且顺滑的转场体验。赶紧动手试一试吧【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
