Jetpack Compose：AnimatedVisibility加Offset后过渡动画失效怎么解决

问题现象 #

使用AnimatedVisibility为组件添加淡入淡出过渡时，若给内部被动画的Composable设置offset修饰符，过渡动画会无法正常显示。

解决方法 #

方法1：将offset移至AnimatedVisibility容器 #

把offset修饰符应用到AnimatedVisibility本身，而非内部子组件，这样过渡动画会作用于包含偏移的整个容器：

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(animationSpec = tween(1000)),
    exit = fadeOut(animationSpec = tween(1000)),
    modifier = Modifier.offset(100.dp, 0.dp)
) {
    Text(text = "Hello, world!")
}
Button(onClick = { visible = !visible }) {
    Text("Click Me")
}

方法2：在过渡动画中显式声明offset状态 #

如果需要保留子组件的offset设置，可以在enter/exit过渡中明确指定offset的初始和目标状态，让动画系统正确感知组件的位置变化：

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(tween(1000)) + offset(0.dp, 0.dp),
    exit = fadeOut(tween(1000)) + offset(100.dp, 0.dp)
) {
    Text(
        text = "Hello, world!",
        modifier = Modifier.offset(100.dp, 0.dp)
    )
}

原理说明 #

AnimatedVisibility的过渡动画基于Composable的布局边界计算。offset修饰符属于绘制阶段的偏移，不会改变组件的布局位置，导致动画系统无法正确识别组件的实际显示区域，从而跳过过渡效果。将offset移到容器上或在过渡中显式声明offset状态，能让动画系统正确追踪组件的显示/隐藏状态，确保动画正常执行。

内容的提问来源于stack exchange，提问作者ebelli