Jetpack Compose MotionLayout如何实现XML带OnSwipe的Transition过渡效果

Jetpack Compose 中的 MotionLayout 可通过 MotionScene 的 JSON 配置段添加 onSwipe 配置实现完全等价于 XML 中的滑动过渡效果，无需手动监听手势或通过按钮触发。

第一步：编写对应参数的 MotionScene 配置 #

以下配置和你给出的XML参数完全一一对应：

val customMotionScene = """
{
  ConstraintSets: {
    start: {
      // 此处替换为你原XML中@id/start的所有约束逻辑
      view1: {
        // 示例：start状态下view1的约束，按你的实际需求修改
        bottom: ['parent', 'bottom', 0],
        start: ['parent', 'start', 0],
        end: ['parent', 'end', 0],
        height: 200
      }
    },
    end: {
      // 此处替换为你原XML中@id/end的所有约束逻辑
      view1: {
        top: ['parent', 'top', 0],
        start: ['parent', 'start', 0],
        end: ['parent', 'end', 0],
        height: 200
      }
    }
  },
  Transitions: {
    default: {
      from: 'start',
      to: 'end',
      duration: 1500,
      interpolator: 'linear',
      onSwipe: {
        anchorId: 'view1',
        anchorSide: 'top',
        direction: 'dragUp',
        dragScale: 1
      }
    }
  }
}
""".trimIndent()

第二步：Compose 端调用代码 #

import androidx.constraintlayout.compose.MotionLayout
import androidx.constraintlayout.compose.MotionScene
import androidx.constraintlayout.compose.rememberMotionLayoutState

@Composable
fun SwipeMotionSample() {
    val motionState = rememberMotionLayoutState()
    MotionLayout(
        motionScene = MotionScene(content = customMotionScene),
        state = motionState,
        modifier = Modifier.fillMaxSize()
    ) {
        // 对应XML中的@id/view1，必须加layoutId和配置里的anchorId对应
        Box(
            modifier = Modifier
                .layoutId("view1")
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.Blue)
        )
        // 其他业务组件按需求补充即可
    }
}

关键说明 #

• 不需要手动控制过渡进度或者添加滑动监听，只要在Transition中配置了onSwipe，MotionLayout会自动处理拖拽手势：拖动时进度跟随手指位移，松手后按配置的时长和插值器完成剩余过渡动画
• 如果你不需要松手后的自动动画，只需要过渡进度完全跟随手指滑动，可在onSwipe配置段中添加"touchUp": "stop"即可

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