material-motion-compose 快速上手指南5 分钟在 Jetpack Compose 中集成第一个转场动画【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-composematerial-motion-compose 是一个为 Jetpack Compose 与 Compose Multiplatform 打造的 Material Motion 转场动画库它把 Material Design 规范中的动效模式Shared Axis、Fade Through、Fade、Elevation Scale 等封装成了开箱即用的 Compose 组件。无论你是 Android 新手还是跨平台开发者只需几行代码就能让页面切换拥有官方级的手感和质感。本文就带你用最快的方式在 Jetpack Compose 中接入你的第一个转场动画。为什么需要专门的转场动画库手写动画容易遇到两个痛点一是动效曲线、时长、方向需要反复调试才能贴近 Material 规范二是多页面切换时新旧内容的叠加层级、进入/退出时序难以把控。material-motion-compose 正是为了解决这些问题而生它提供了一套与 Material Design Motion 完全对齐的现成方案且底层基于官方 AnimatedContent / AnimatedVisibility 构建不侵入你的业务代码。一、快速安装添加依赖就这么简单在模块的build.gradle或build.gradle.kts中按下面的方式添加依赖即可repositories { mavenCentral() } dependencies { implementation io.github.fornewid:material-motion-compose-core:1.2.0 }提示版本号需要与你的 Compose 版本匹配。Jetpack Compose 1.7 对应 1.2.xCompose Multiplatform 1.6.10 对应 2.0.x详见项目根目录的 README.md。该库支持Android、Desktop (JVM)、iOS、Wasm四个平台一份代码到处运行。二、5 分钟上手写出第一个 Shared Axis 转场动画Shared Axis共享轴是 Material 动效中最常用的模式页面沿着 X / Y / Z 轴滑动切换同时伴随淡入淡出视觉连贯自然。下面这段代码就是完整的用法val (screen, onScreenChanged) remember { mutableStateOf(0) } MaterialSharedAxisX( targetState screen, // 状态变化时自动触发转场动画 forward true, // 控制动画方向前进 / 返回 ) { newScreen - // 根据 newScreen 渲染对应的页面内容 when (newScreen) { 0 - LoginScreen(onNext { onScreenChanged(1) }) 1 - HomeScreen(onBack { onScreenChanged(0) }) } }只要targetState发生变化库就会自动播放对应的转场动画你完全不需要关心动画的时序、层级和方向细节。效果如下完整的屏幕示例可以参考 MaterialSharedAxisScreen.kt其中还演示了 X / Y / Z 三个轴以及前进/返回方向的控制方式。三、六大现成动效总有一款适合你的场景动效模式典型场景对应组件Shared Axis X/Y/Z页面级导航切换MaterialSharedAxisX/Y/ZFade Through列表与详情间的层级切换MaterialFadeThroughFade元素显示/隐藏MaterialFadeElevation Scale浮层、卡片层级变化materialElevationScaleIn/OutHold过渡期间保持画面holdIn/holdOutCircular Reveal圆角扩散式揭示Modifier.circularReveal(...)1. Fade Through最优雅的页面淡入淡出MaterialFadeThrough( targetState screen ) { newScreen - // 页面内容 }2. Fade轻量级的显隐动画适合加载状态、提示条等场景实现见 MaterialFade.ktMaterialFade(visible visible) { // 需要显示的内容 }3. Circular Reveal点击触发的扩散效果var visible by remember { mutableStateOf(false) } Box( modifier Modifier.circularReveal( visible visible, center { fullSize - Offset(x 1f * fullSize.width, y 0f * fullSize.height) // 从右上角扩散 }, ) ) { ... }四、进阶技巧用 MaterialMotion 自由组合动效如果不同状态需要不同的动效可以用底层容器MaterialMotion自由组合核心实现见 MaterialMotion.ktval slideDistance rememberSlideDistance(slideDistance 30.dp) MaterialMotion( targetState screen, motionSpec { when (targetState) { 0 - materialSharedAxisY(forward true, slideDistance slideDistance) 1 - materialFadeThroughIn() with materialFadeThroughOut() else - materialElevationScaleIn() } }, pop false, // 返回时是否反向渲染 ) { newScreen - // 页面内容 }默认动效时长是 300ms见 MotionConstants.kt你也可以按需修改val motionSpec materialFadeThrough(durationMillis 300)各种动效的组合玩法可以参考 docs/core.md 中的官方示例以及 sample 目录下的 MaterialFadeThroughScreen.kt 等示例文件。五、写在最后从添加依赖到跑通第一个动画整个过程真的只需要 5 分钟。material-motion-compose 把 Material Motion 规范沉淀成了简单直观的 Compose API让你把精力集中在业务本身而不是动效细节上。如果你正在从旧版本升级还可以参考 migrating-from-0.9-to-0.10.md 和 migrating-from-0.5-to-0.6.md 迁移文档。快去试试吧让应用的每一次跳转都丝滑起来【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 material-motion-compose 快速上手指南：5 分钟在 Jetpack Compose 中集成第一个转场动画
material-motion-compose 快速上手指南5 分钟在 Jetpack Compose 中集成第一个转场动画【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-composematerial-motion-compose 是一个为 Jetpack Compose 与 Compose Multiplatform 打造的 Material Motion 转场动画库它把 Material Design 规范中的动效模式Shared Axis、Fade Through、Fade、Elevation Scale 等封装成了开箱即用的 Compose 组件。无论你是 Android 新手还是跨平台开发者只需几行代码就能让页面切换拥有官方级的手感和质感。本文就带你用最快的方式在 Jetpack Compose 中接入你的第一个转场动画。为什么需要专门的转场动画库手写动画容易遇到两个痛点一是动效曲线、时长、方向需要反复调试才能贴近 Material 规范二是多页面切换时新旧内容的叠加层级、进入/退出时序难以把控。material-motion-compose 正是为了解决这些问题而生它提供了一套与 Material Design Motion 完全对齐的现成方案且底层基于官方 AnimatedContent / AnimatedVisibility 构建不侵入你的业务代码。一、快速安装添加依赖就这么简单在模块的build.gradle或build.gradle.kts中按下面的方式添加依赖即可repositories { mavenCentral() } dependencies { implementation io.github.fornewid:material-motion-compose-core:1.2.0 }提示版本号需要与你的 Compose 版本匹配。Jetpack Compose 1.7 对应 1.2.xCompose Multiplatform 1.6.10 对应 2.0.x详见项目根目录的 README.md。该库支持Android、Desktop (JVM)、iOS、Wasm四个平台一份代码到处运行。二、5 分钟上手写出第一个 Shared Axis 转场动画Shared Axis共享轴是 Material 动效中最常用的模式页面沿着 X / Y / Z 轴滑动切换同时伴随淡入淡出视觉连贯自然。下面这段代码就是完整的用法val (screen, onScreenChanged) remember { mutableStateOf(0) } MaterialSharedAxisX( targetState screen, // 状态变化时自动触发转场动画 forward true, // 控制动画方向前进 / 返回 ) { newScreen - // 根据 newScreen 渲染对应的页面内容 when (newScreen) { 0 - LoginScreen(onNext { onScreenChanged(1) }) 1 - HomeScreen(onBack { onScreenChanged(0) }) } }只要targetState发生变化库就会自动播放对应的转场动画你完全不需要关心动画的时序、层级和方向细节。效果如下完整的屏幕示例可以参考 MaterialSharedAxisScreen.kt其中还演示了 X / Y / Z 三个轴以及前进/返回方向的控制方式。三、六大现成动效总有一款适合你的场景动效模式典型场景对应组件Shared Axis X/Y/Z页面级导航切换MaterialSharedAxisX/Y/ZFade Through列表与详情间的层级切换MaterialFadeThroughFade元素显示/隐藏MaterialFadeElevation Scale浮层、卡片层级变化materialElevationScaleIn/OutHold过渡期间保持画面holdIn/holdOutCircular Reveal圆角扩散式揭示Modifier.circularReveal(...)1. Fade Through最优雅的页面淡入淡出MaterialFadeThrough( targetState screen ) { newScreen - // 页面内容 }2. Fade轻量级的显隐动画适合加载状态、提示条等场景实现见 MaterialFade.ktMaterialFade(visible visible) { // 需要显示的内容 }3. Circular Reveal点击触发的扩散效果var visible by remember { mutableStateOf(false) } Box( modifier Modifier.circularReveal( visible visible, center { fullSize - Offset(x 1f * fullSize.width, y 0f * fullSize.height) // 从右上角扩散 }, ) ) { ... }四、进阶技巧用 MaterialMotion 自由组合动效如果不同状态需要不同的动效可以用底层容器MaterialMotion自由组合核心实现见 MaterialMotion.ktval slideDistance rememberSlideDistance(slideDistance 30.dp) MaterialMotion( targetState screen, motionSpec { when (targetState) { 0 - materialSharedAxisY(forward true, slideDistance slideDistance) 1 - materialFadeThroughIn() with materialFadeThroughOut() else - materialElevationScaleIn() } }, pop false, // 返回时是否反向渲染 ) { newScreen - // 页面内容 }默认动效时长是 300ms见 MotionConstants.kt你也可以按需修改val motionSpec materialFadeThrough(durationMillis 300)各种动效的组合玩法可以参考 docs/core.md 中的官方示例以及 sample 目录下的 MaterialFadeThroughScreen.kt 等示例文件。五、写在最后从添加依赖到跑通第一个动画整个过程真的只需要 5 分钟。material-motion-compose 把 Material Motion 规范沉淀成了简单直观的 Compose API让你把精力集中在业务本身而不是动效细节上。如果你正在从旧版本升级还可以参考 migrating-from-0.9-to-0.10.md 和 migrating-from-0.5-to-0.6.md 迁移文档。快去试试吧让应用的每一次跳转都丝滑起来【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考