material-motion-compose 核心组件 MaterialMotion 完全教程：基于 AnimatedContent 的页面切换动画

material-motion-compose 核心组件 MaterialMotion 完全教程基于 AnimatedContent 的页面切换动画【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose想给 Jetpack Compose 应用加上丝滑的页面切换动画却不想手写一堆 Transition 状态管理代码material-motion-compose 正是为此而生的开源动效库它是 Material Motion 官方动效规范在 Jetpack Compose 与 Compose Multiplatform 上的完整实现同时支持 Android、iOS、桌面端与 WebWasm四大平台。本文将带你全面掌握它的核心组件 MaterialMotion——一个基于 AnimatedContent 封装的高阶组件只需切换一个状态值即可自动完成旧页面淡出、新页面淡入的整套过渡动画。material-motion-compose 是什么一套开箱即用的动效方案material-motion-compose 把 Material Design 动效系统中定义的几种经典动效模式Shared Axis、Fade Through、Fade、Elevation Scale、Hold全部封装成了可直接调用的组件与动画函数。你不需要关心插值器、动画时长、Z 轴层级这些底层细节框架已经按官方规范帮你配好了默认值动效模式组件/函数适用场景共享轴 X/Y/ZmaterialSharedAxisX/Y/Z同级页面切换表达空间位置关系淡入淡出过渡materialFadeThrough层级无关的页面内容更新纯淡入淡出MaterialFade显示/隐藏某个内容区域抬升缩放materialElevationScaleIn/Out强调内容层级关系如弹窗、详情页停顿保持holdIn/holdOut转场中保持画面适合与退出动画组合其中MaterialMotion是最核心的通用入口几乎所有动效模式都可以通过它来驱动。MaterialMotion 核心原理AnimatedContent 的一层优雅封装看源码会发现MaterialMotion本质上是对 Compose 自带的AnimatedContent的封装内部通过updateTransition维护状态当传入的targetState发生变化时自动触发内容切换动画并额外处理了正向/反向播放时的内容层级targetContentZIndex问题保证前进时新页面盖在旧页面之上、返回时顺序反转。核心源码位于core/src/commonMain/kotlin/soup/compose/material/motion/MaterialMotion.kt其参数设计非常贴近实际开发targetState切换动画的触发键改变它就会播放动画transitionSpec配置进入/退出动画的ContentTransformpop是否反向播放返回操作时传 truecontentKey指定内容标识用于精确复用某个页面label便于在 Android Studio 布局检查器中区分动画。快速开始三步接入 MaterialMotion第一步添加依赖。在build.gradle.kts中加入repositories { mavenCentral() } dependencies { implementation(io.github.fornewid:material-motion-compose-core:version) }第二步编写最简页面切换。定义一个状态然后用MaterialMotion包住页面内容val (screen, onScreenChanged) remember { mutableStateOf(0) } MaterialMotion( targetState screen, transitionSpec { materialFadeThrough() } ) { current - when (current) { 0 - HomePage(onClick { onScreenChanged(1) }) 1 - DetailPage(onClick { onScreenChanged(0) }) } }第三步改变状态触发动画。点击按钮更新screen的值页面就会自动播放 fade through 过渡。如果想要手动体验完整示例可以克隆官方仓库git clone https://gitcode.com/gh_mirrors/ma/material-motion-compose运行sample/下的示例工程查看每种动效的实时效果。核心用法一用 targetState 驱动任意页面切换动画MaterialMotion最大的优势是状态与动画解耦你只需要维护一个状态值动画完全由组件接管。无论是整页切换、Tab 内容切换还是列表项展开思路都一样——把想显示什么作为targetState。val (forward, onForwardChanged) remember { mutableStateOf(false) } MaterialMotion( targetState forward, transitionSpec { materialSharedAxisX(forward forward, slideDistance slideDistance) }, pop forward.not() ) { isForward - ForwardBackwardContents(isForward) }这段代码来自示例工程的sample/shared/src/commonMain/kotlin/soup/compose/material/motion/shared/material/sharedaxis/MaterialSharedAxisScreen.kt它用一个布尔值在前进/后退两个界面之间切换并配合pop参数实现了返回时动画自动反转——这在实际 App 的页面栈导航中非常实用。核心用法二transitionSpec 的五大经典动效模式transitionSpec是 MaterialMotion 的灵魂它可以返回任意ContentTransform。框架内置了 Material 规范定义的几种现成组合共享轴切换动画Shared AxismaterialSharedAxisX让新页面从侧向滑入materialSharedAxisY是上下滑动materialSharedAxisZ则是缩放淡入新页面从 80% 放大到 100%表达空间层级变化的关系。淡入淡出过渡Fade ThroughmaterialFadeThrough让新内容先放大淡入、旧内容快速淡出适合列表刷新、Tab 切换这类层级无关的内容变化观感最柔和。抬升缩放与停顿保持MaterialMotion( targetState screen, transitionSpec { materialElevationScaleIn() with materialElevationScaleOut() } ) { current - ... }materialElevationScaleIn/Out模拟内容从纸面抬升的效果用于强调新内容的层级holdIn/holdOut则让画面保持静止常与其他退出动画组合使用。这些动画函数的定义都位于core/src/commonMain/kotlin/soup/compose/material/motion/animation/目录下源码清晰易读非常适合作为自定义动画的参考模板。进阶技巧按状态切换不同动画与时长自定义实际项目中不同页面切换往往需要不同动效。MaterialMotion支持在transitionSpec内根据当前状态动态选择动画MaterialMotion( targetState screen, transitionSpec { when (targetState) { is Home - materialSharedAxisY(forward true, slideDistance slideDistance) is Detail - materialFadeThroughIn() with materialFadeThroughOut() else - materialElevationScaleIn() with materialElevationScaleOut() } }, pop false ) { newScreen - ... }调整动画节奏也很简单直接传入毫秒时长即可val motionSpec materialFadeThrough(durationMillis 300)所有默认值集中定义在core/src/commonMain/kotlin/soup/compose/material/motion/MotionConstants.kt中默认时长 300ms、淡入 150ms、淡出 75ms、滑动距离 30dp你也可以参考它统一管理自己的动效参数。另外rememberSlideDistance()会把 dp 单位的滑动距离按当前屏幕密度换算为像素在slideDistance参数中直接使用即可。在 Navigation 导航中集成页面切换动画如果你用的是 Navigation Compose也可以直接复用这套动效函数。参考示例工程的sample/shared/src/commonMain/kotlin/soup/compose/material/motion/shared/navigation/AnimatedNavHostScreen.ktNavHost( navController navController, startDestination first, enterTransition { materialSharedAxisXIn(forward true, slideDistance slideDistance) }, exitTransition { materialSharedAxisXOut(forward true, slideDistance slideDistance) }, popEnterTransition { materialSharedAxisXIn(forward false, slideDistance slideDistance) }, popExitTransition { materialSharedAxisXOut(forward false, slideDistance slideDistance) } ) { ... }这样就把 Material Motion 动效无缝融入了导航体系前进与返回动画自动区分方向体验与 Material 设计规范保持完全一致。总结一套动效四个平台通吃material-motion-compose 的MaterialMotion组件让你用极少的代码获得符合 Material 规范的专业页面切换动画状态驱动、动效可定制、支持反向播放并且天然跨 Android / iOS / Desktop / Wasm 四大平台。对于追求高完成度交互体验的 Compose 开发者来说它几乎是开箱即用的最佳选择。建议从克隆仓库运行示例工程开始逐个体验五种动效模式再对照源码理解封装逻辑很快你就能在自己的项目里做出媲美原生 Material 应用的流畅转场效果。【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考