在 Android 的 Jetpack Compose 中，控制组件的显隐往往被误认为是一件简单的状态切换。但真正想要让 UI 动画自然、流畅，却需要掌握一套完整的工具链：AnimatedVisibility不同类型的过渡还有它们的参数调控。

从痛点一来看。直接使用 if‑else 就失去了动画

很多开发者在实现显隐时会这样写：

if {
Text
} else {
Box
}

这段代码虽然能完成显隐，但却完全没有动画效果，也无法复用或组合多种过渡。方法是把可见性包装进 AnimatedVisibility让 Compose 自动管理动画生命周期。

主要 API：

• ,slideInVertically,slideIn
• ,fadeOut
• ,scaleOut
• ,shrinkOut
• ,veilOut

示例一这方面，单一滑动 + 缩放动画

先看一个最常见的滑入滑出例子：

private const val ANIM_DURATION_MS = 300
var visible by remember { mutableStateOf }
AnimatedVisibility(
visible = visible。enter = slideInHorizontally(
animationSpec = tween,initialOffsetX = { fullWidth -> if fullWidth else -fullWidth }
),exit = slideOutHorizontally(
animationSpec = tween,targetOffsetX = { fullWidth -> if fullWidth else -fullWidth }
)
) {
Text
}

关键参数解读

• : 整个动画持续时间。建议统一管理，以保持所有组合动画同步。
• : 布尔开关决定从左侧还是右侧滑入。
• : 控制显隐状态，配合 remember { mutableStateOf }.

替代过渡效果

再看淡入淡出，

enter = fadeIn),exit = fadeOut)

缩放中心的观点是。

enter = scaleIn(
animationSpec = tween,transformOrigin = TransformOrigin
),exit = scaleOut(
animationSpec = tween,transformOrigin = TransformOrigin
)

从痛点二来看，组合多种过渡却不按预期执行？

The trick is that + operator** merges transitions into a single parallel execution**,not a sequential chain.

至于示例，缩放 + 从右侧滑入

AnimatedVisibility(
visible = visible,enter =
scaleIn(
animationSpec = tween,transformOrigin = TransformOrigin
) + slideInHorizontally(
animationSpec = tween,initialOffsetX = { -it } // 从左侧开始
),exit =
scaleOut(
animationSpec = tween。transformOrigin = TransformOrigin
) + slideOutHorizontally(
animationSpec = tween,targetOffsetX ={ it } // 推向右侧
)
){ Text }

再看示例，缩放 + 渐变

AnimatedVisibility(
visible = visible,enter =
scaleIn(
animationSpec,transformOrigin=TransformOrigin
) + fadeIn),exit =
scaleOut(
animationSpec,transformOrigin=TransformOrigin
) + fadeOut)
){ Text }

说到痛点三，slide 有三种形式，你到底选哪一种？

• slideInHorizontally / slideOutHorizontally – 横向平移。
• slideI​nVertically / slideO​utVertically – 垂直平移。
• slideI​n / slideO​ut – 自定义起始或结束偏移，可实现任意方向。

使用自定义 offset 的完整实例：

 AnimatedVisibility (
visible=true,enter= slideI​n (
animationSpec=tween,initialOffset={size-> IntOffset})。// 从右下角
exit= slideO​ut (
animationSpec=tween,targetOffset={size-> IntOffset})) // 向左上退出
{ Text }

痛点四这方面，遮罩式“揭幕”难以调参？—— Veil 与 Unveil 技巧

• unveilI​n : 当内容出现时覆盖层由完全不透明变为透明；默认颜色是半透明黑色，可改为品牌色。
• veilO​ut : 隐藏时覆盖层从透明变为半透明，给人“被掀盖”的视觉感。
• initialColor / targetColor : 控制遮罩颜色；matchParentSize 控制遮罩是否撑满父布局。
适用于页面切换、对话框弹出等场景，可以让旧内容在新内容出现前被轻轻掀开。

小贴士:* 如果你想让遮罩与其它变形同步。需要把 matchParentSize 设置为 false，让它跟随内容一起变化。