Hold 与 Translate 动效揭秘：material-motion-compose 中被低估的 6 个动画工具函数

Hold 与 Translate 动效揭秘material-motion-compose 中被低估的 6 个动画工具函数【免费下载链接】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 动效体系的库除了广为人知的 SharedAxis、FadeThrough 之外它还内置了一组低调却实用的动画工具函数。本文为你揭秘 Hold 与 Translate 系列共 6 个动画工具函数学会它们你的页面切换动效将更加自然流畅。material-motion-compose 中 Hold 与 Translate 系列工具函数有哪些在core/src/commonMain/kotlin/soup/compose/material/motion/animation/目录下有两个文件藏着这 6 个宝藏函数函数所属文件作用holdIn/holdOutHold.kt无动画切换进场/退场translateXIn/translateXOutTranslate.kt水平方向位移切换translateYIn/translateYOutTranslate.kt垂直方向位移切换它们都返回标准的EnterTransition/ExitTransition可以直接配合MaterialMotion容器或任何 Compose 动画 API 使用开箱即用 holdIn 与 holdOut实现无动画切换的最快方法当你希望页面瞬间切换、不产生任何过渡效果时holdIn和holdOut就是最优雅的答案。一键使用无动画切换源码实现非常巧妙它并非真正不做动画而是通过fadeIn(initialAlpha 1f)让内容以完全透明度的状态直接出现再用fadeOut(targetAlpha 0.999f)模拟瞬间消失从而绕开 Compose 动画系统的限制。import soup.compose.material.motion.animation.holdIn import soup.compose.material.motion.animation.holdOut MaterialMotion( targetState screen, transitionSpec { holdIn() togetherWith holdOut() }, ) { newScreen - /* 你的内容 */ }这样即使用户快速连点切换界面也不会出现闪烁或半透明叠加的尴尬瞬间非常适合 Tab 快速切换、输入法弹出等高频交互场景 ✨translateXIn / translateXOut打造丝滑的左右平移切换水平位移是最常用的页面转场之一。translateXIn让新页面从左侧滑入translateXOut让旧页面滑出两者配合即可得到标准的左右推入效果。默认的 1/2 屏位移距离函数默认从屏幕一半位置开始滑动MaterialMotion( targetState screen, transitionSpec { translateXIn() togetherWith translateXOut() }, ) { newScreen - /* 你的内容 */ }如果你想要自定义位移距离传入一个返回像素值的 lambda 即可transitionSpec { translateXIn { it } togetherWith translateXOut { it } }上面的{ it }表示按完整屏幕宽度滑动适合做整屏翻页效果而默认的{ -it / 2 }是半屏滑动视觉上更轻快 translateYIn / translateYOut上下移动让页面切换更有层次与水平平移对应translateYIn/translateYOut负责垂直方向的位移常用于底部弹层、下拉刷新、上滑加载等场景。用法完全一致MaterialMotion( targetState screen, transitionSpec { translateYIn() togetherWith translateYOut() }, ) { newScreen - /* 你的内容 */ }用位移做返回时的反向动效这套函数最强的玩法是结合pop参数实现前进/后退双向动效——前进时新页面滑入返回时反向滑动方向感清晰符合用户直觉。在 HoldScreen.kt 示例中就有现成的写法transitionSpec { when { targetState - translateXIn { it } togetherWith holdOut() else - holdIn() togetherWith translateXOut { it } } }前进时用水平平移返回时用 Hold 瞬间切换一进一出节奏分明 4 个理由让你重新认识这 6 个动画工具函数零成本上手全部是顶层函数无需继承任何类一行代码接入。可自由组合togetherWith能把任何进入/退出函数拼接比如translateXIn() togetherWith materialFadeOut()。默认参数贴心所有函数都内置 300ms 的默认时长见 MotionConstants.kt也支持durationMillis自定义。全平台通用基于 Compose Multiplatform 编写Android、iOS、Desktop、Web 一套代码全部生效。总结如果你正在使用 material-motion-compose 做页面动效别再只盯着 SharedAxis 和 FadeThrough——Hold 与 Translate 这 6 个动画工具函数正是你打磨细节、提升体验的隐藏武器。从今天起试着用holdIn处理高频切换、用translateX*做翻页、用translateY*做弹层你的 Compose 应用会立刻拥有专业级动效质感 【免费下载链接】material-motion-composeMaterial Motion for Jetpack Compose and Compose Multiplatform项目地址: https://gitcode.com/gh_mirrors/ma/material-motion-compose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考