Android Compose 如何在局部区域实现两个View同步滑入滑出动画

你需要的这种同区域内“一个视图进入、另一个同步退出”的转场效果，完全可以在局部内容区实现，不需要依赖Navigation Compose的页面级转场能力。

核心实现逻辑 #

别拿两个独立的AnimatedVisibility硬拼同步效果——哪怕你把两个动画的时长、缓动设置得完全一模一样，两个动画的启动时序是分开的，碰到主线程帧调度稍微卡一下，就会出现退出动画跑了半拍、进入动画才启动的错位感。
正确的思路是拿统一的updateTransition当全局动画驱动源，给两个待切换的视图分别绑定对应的动画属性，所有动画参数都是从同一个状态派生的，自然能做到帧级别的完全同步，这种实现和CrossFade的适用场景完全匹配。

可直接复用的实现步骤 #

1. 先定义需要切换的内容状态枚举，标记当前区域要展示哪个视图：

   enum class LocalContentType {
       ViewA, ViewB
   }
   

2. 初始化状态和统一的Transition实例，把两个视图所有用到的动画参数（位移、透明度等）都绑定到这个Transition上，统一配置动画规格：

   // 记录当前展示的内容
   var currentContent by remember { mutableStateOf(LocalContentType.ViewA) }
   // 全局共享的动画驱动源，两个视图的动画全部基于这个实例生成
   val switchTransition = updateTransition(
       targetState = currentContent,
       label = "localContentSwitch"
   )
   
   // 视图A的动画参数：展示时在原位，切走时从右侧滑出并渐隐
   val viewAOffsetX by switchTransition.animateDp(
       transitionSpec = { tween(durationMillis = 300, easing = FastOutSlowInEasing) },
       label = "viewAOffset"
   ) { state ->
       when (state) {
           LocalContentType.ViewA -> 0.dp
           LocalContentType.ViewB -> 320.dp
       }
   }
   val viewAAlpha by switchTransition.animateFloat(
       transitionSpec = { tween(durationMillis = 300) },
       label = "viewAAlpha"
   ) { state ->
       when (state) {
           LocalContentType.ViewA -> 1f
           LocalContentType.ViewB -> 0f
       }
   }
   
   // 视图B的动画参数：展示时在原位，切过来时从左侧滑入并渐显
   val viewBOffsetX by switchTransition.animateDp(
       transitionSpec = { tween(durationMillis = 300, easing = FastOutSlowInEasing) },
       label = "viewBOffset"
   ) { state ->
       when (state) {
           LocalContentType.ViewB -> 0.dp
           LocalContentType.ViewA -> (-320).dp
       }
   }
   val viewBAlpha by switchTransition.animateFloat(
       transitionSpec = { tween(durationMillis = 300) },
       label = "viewBAlpha"
   ) { state ->
       when (state) {
           LocalContentType.ViewB -> 1f
           LocalContentType.ViewA -> 0f
       }
   }
   

3. 在同一个固定尺寸的Box容器里放置两个视图，直接套用上面定义好的动画参数即可：

   // 给容器固定宽高，避免内容切换时测量变化导致布局抖动，和CrossFade的容器要求一致
   Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
       ContentViewA(
           modifier = Modifier
               .offset(x = viewAOffsetX)
               .alpha(viewAAlpha)
       )
       ContentViewB(
           modifier = Modifier
               .offset(x = viewBOffsetX)
               .alpha(viewBAlpha)
       )
   }
   

实用注意事项 #

• 这种实现方式不需要手动处理视图的显示隐藏逻辑，当动画参数走到透明度为0、位移完全移出可视区域时，视图会自动达到和AnimatedVisibility一致的不可见效果，不会带来额外的性能开销。
• 如果后续需要扩展更多视图的切换，只需要在对应的动画参数定义里补全每个状态下的属性值即可，同一个Transition可以承载任意数量的视图动画绑定。
• 如果想要实现内容在区域内连续滑动的效果，只需要把位移值调整为和容器宽度匹配的数值即可，不需要修改整体的同步逻辑。
• 别为了省事儿用两个独立的AnimatedVisibility设置同样的入场出场动画，哪怕调半天参数，也会因为动画调度的独立逻辑出现同步偏差，维护成本远高于直接用共享Transition的方案。

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