MaterialFade 淡入淡出动画教程material-motion-compose 让内容显示更优雅自然【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose在 Jetpack Compose 开发中内容的显示与隐藏往往只发生在一瞬间生硬地出现、消失会让应用显得缺乏质感。而material-motion-compose项目正是为解决这一问题而生它把 Google Material Design 官方 Motion System运动系统中的经典动效完整移植到了 Jetpack Compose 与 Compose Multiplatform 平台。本文要介绍的MaterialFade 淡入淡出动画正是其中最基础也最常用的一种动效——只需几行代码就能让内容的出现与消失变得平滑自然大幅提升应用的用户体验。什么是 MaterialFade 淡入淡出动画为什么推荐用它MaterialFade 是 Material Motion 规范中的一种过渡模式当内容的可见状态发生变化时它会以**淡入Fade In和淡出Fade Out**的方式平滑过渡而不是瞬间切换。相比 Compose 自带的AnimatedVisibility默认效果MaterialFade 的动效细节更贴合 Material Design 设计语言观感更加优雅。它的核心优势非常明显零成本接入一个 Composable 即可完成全部动画无需手写动画状态机⚡多平台支持同一套代码可用于 Android、桌面端JVM、iOS 乃至 Wasm 平台细节讲究淡入时附带轻微缩放从 0.8 放大到 1.0让内容生长出来而非简单变透明灵活可调动画时长、显示状态全部通过参数控制开箱即用。快速上手MaterialFade 淡入淡出动画的引入与基本用法第一步添加依赖在build.gradle中引入核心库依赖版本号请以官方最新发布为准repositories { mavenCentral() } dependencies { implementation io.github.fornewid:material-motion-compose-core:version }第二步使用 MaterialFade 包裹内容使用方式非常简单只需传入一个visible布尔值即可控制内部内容的显示与隐藏var visible by remember { mutableStateOf(true) } MaterialFade(visible visible) { // 这里放置你想要显示/隐藏的内容 Text(我是会淡入淡出的内容) }就是这么简单当visible变化时内容会自动以淡入淡出动画呈现。下面这张图就是官方示例中悬浮按钮FAB的淡入淡出效果核心参数详解如何控制淡入淡出动画的时长与行为MaterialFade 的完整 API 定义位于 MaterialFade.kt它本质上是对 Compose 内置AnimatedVisibility的封装配合 Material 风格的进入/退出动画。核心参数如下visible 参数控制显示与隐藏visible: Boolean是唯一必传参数它决定内容是否可见。你可以把它绑定到按钮点击、网络请求状态等任何状态上。参考官方示例 MaterialFadeScreen.kt用按钮切换 FAB 的显隐就是这么实现的val (visible, onVisibleChanged) remember { mutableStateOf(true) } Button(onClick { onVisibleChanged(visible.not()) }) { Text(text if (visible) HIDE FAB else SHOW FAB) } MaterialFade(visible visible) { FloatingActionButton(onClick {}) { /* ... */ } }enterDurationMillis 与 exitDurationMillis自定义动画时长两个时长参数分别控制淡入和淡出的耗时单位毫秒不传则使用 Material 规范推荐的默认值参数默认值作用visible必填控制内容显示与隐藏enterDurationMillis150ms淡入动画时长exitDurationMillis75ms淡出动画时长labelMaterialFade用于在 Android Studio 中区分动画默认值定义在 MotionConstants.kt 中淡入 150ms、淡出 75ms。淡出比淡入更短这是 Material Motion 的设计哲学——退场要快进场可慢让用户注意力快速聚焦到新内容上。你也可以自由定制例如让淡入更舒缓MaterialFade( visible visible, enterDurationMillis 300, exitDurationMillis 150, ) { /* 内容 */ }幕后细节MaterialFade 动画是如何实现的如果你好奇这层动画背后做了什么可以查看 animation/MaterialFade.kt。其中两个关键函数materialFadeIn和materialFadeOut揭示了全部秘密淡入materialFadeIn由fadeIn透明度从 0 到 1线性缓动与scaleIn缩放从 0.8 到 1.0FastOutSlowIn 缓动组合而成。前 30% 的时间完成透明度过渡同时伴随缩放产生浮现的层次感淡出materialFadeOut仅包含fadeOut透明度动画干净利落。这套实现与 Android View 体系中com.google.android.material.transition.MaterialFade的官方行为保持一致所以在 Compose 中你也能获得与原生 Material 组件完全一致的动效体验。实战场景加载状态切换与 FAB 显示隐藏淡入淡出动画最常见的应用场景包括加载状态切换页面数据加载完成后用 MaterialFade 平滑显示内容区域悬浮按钮FAB显隐如官方示例中根据滚动位置显示或隐藏 FAB避免遮挡内容通知与提示条临时消息的出现与消失配合淡入淡出不会显得突兀弹窗与浮层内容层的平滑过渡提升整体交互质感。项目中还提供了对应的测试用例 MaterialFadeTest.kt验证了内容在visible变化时正确显示与消失你可以参考它来为自己的动画逻辑编写测试。常见问题与注意事项QMaterialFade 和 Compose 自带的AnimatedVisibility有什么区别AMaterialFade 是对AnimatedVisibility的封装但采用了 Material Motion 标准的淡入淡出缩放组合动画节奏与细节更符合 Material 设计规范。Q忘记传visible会怎样Avisible是必传参数必须显式指定这是控制动画开关的唯一入口。Q想要修改其他动效怎么办A同一项目还提供了MaterialSharedAxis共享轴、MaterialFadeThrough穿越淡入淡出、MaterialElevationScale高度缩放等更多 Motion 模式完整用法见 docs/core.md 文档也可以直接通过git clone https://gitcode.com/gh_mirrors/ma/material-motion-compose拉取源码和示例项目进行学习。总结MaterialFade 淡入淡出动画是 material-motion-compose 中最易上手、也最实用的动效之一。通过一个简单的MaterialFade(visible ...)调用你就能让内容显示与隐藏变得优雅自然且无需处理任何动画状态。默认时长已遵循 Material 规范开箱即用进阶用法还可以自由调整动画时长与细节。如果你正在用 Jetpack Compose 或 Compose Multiplatform 构建应用强烈建议把 MaterialFade 加入你的动效工具箱让每一次内容的出现与消失都成为一次精致的体验。【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考