Android Jetpack Compose可拖拽元素归位实现问题求助

问题背景 #

需要实现一个可拖拽的Compose元素，要求用户抬手时元素平滑回到初始位置，现有两种实现方案存在问题：

方案一及其问题 #

@Composable
fun dragAndBack2() {
    var offset by remember { mutableStateOf(IntOffset.Zero) }
    var isAnimating by remember { mutableStateOf(false) }

    var animate = animateIntOffsetAsState(
        targetValue = if (isAnimating) {
            IntOffset.Zero
        } else offset,
        animationSpec = tween(
            durationMillis = 1000,
            easing = LinearEasing
        ),
        finishedListener = {
            offset = IntOffset.Zero
        }

    )
    Box(
        modifier = Modifier
            .offset { if (isAnimating) animate.value else offset }
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragCancel = { isAnimating = true },
                    onDragStart = { isAnimating = false },
                    onDragEnd = { isAnimating = true },
                    onDrag = { change, dragAmount ->
                        change.consumeAllChanges()
                        val offsetChange =
                            IntOffset(dragAmount.x.roundToInt(), dragAmount.y.roundToInt())
                        offset = offset.plus(offsetChange)
                    }
                )
            }
            .background(Color.Blue)
            .size(50.dp)
    )
}

问题：用户抬手时，元素会从当前手指位置跳变到最后保存的offset值，再执行归位动画，体验不流畅。

方案二及其问题 #

@Composable
fun AnimatedBox() {
    var isAnimating by remember { mutableStateOf(false) }
    val transition = updateTransition(targetState = !isAnimating)

    var offset by remember { mutableStateOf(IntOffset.Zero) }

    val transitionOffset by transition.animateIntOffset(
        transitionSpec = {
            keyframes {
                durationMillis = 1000
                offset at 0 with LinearOutSlowInEasing // start value
                IntOffset.Zero at 500
            }
        },
        label = "boxSize"
    ) { b ->
        if (b) {
            offset
        } else {
            IntOffset.Zero
        }
    }

    Box(
        modifier = Modifier
            .offset { transitionOffset }
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragStart = {
                        offset = IntOffset.Zero
                        isAnimating = false
                    },
                    onDragEnd = {
                        isAnimating = true
                    },
                    onDrag = { change, dragAmount ->
                        change.consumeAllChanges()
                        val offsetChange =
                            IntOffset(dragAmount.x.roundToInt(), dragAmount.y.roundToInt())
                        offset = offset.plus(offsetChange)
                    }
                )
            }
            .background(Color.Blue)
            .size(50.dp)
    )
}

问题：手指未移动就抬手时，元素会快速回到初始位置；同时两种方案都存在动画触发延迟的问题。

优化方案 #

核心思路：始终使用动画值作为元素的偏移量，拖拽时直接更新动画的目标值，抬手时将目标值设为初始位置，避免状态切换导致的跳变和延迟。

@Composable
fun SmoothDragAndResetBox() {
    // 记录当前拖拽的累计偏移量
    var dragOffset by remember { mutableStateOf(IntOffset.Zero) }
    // 动画的目标偏移量：拖拽时是dragOffset，抬手时是Zero
    val animatedOffset by animateIntOffsetAsState(
        targetValue = dragOffset,
        animationSpec = tween(durationMillis = 500, easing = LinearOutSlowInEasing),
        finishedListener = {
            // 动画结束后重置拖拽偏移量，避免下次拖拽起始位置错误
            if (it == IntOffset.Zero) {
                dragOffset = IntOffset.Zero
            }
        }
    )

    Box(
        modifier = Modifier
            .offset { animatedOffset }
            .pointerInput(Unit) {
                detectDragGestures(
                    onDragStart = {
                        // 拖拽开始时，确保动画立即停在当前位置
                        dragOffset = animatedOffset
                    },
                    onDrag = { change, dragAmount ->
                        change.consumeAllChanges()
                        val offsetChange = IntOffset(dragAmount.x.roundToInt(), dragAmount.y.roundToInt())
                        // 直接更新目标偏移量，动画会自动跟随
                        dragOffset = dragOffset.plus(offsetChange)
                    },
                    onDragEnd = {
                        // 抬手时将目标偏移量设为初始位置，触发归位动画
                        dragOffset = IntOffset.Zero
                    },
                    onDragCancel = {
                        // 拖拽取消时同样触发归位动画
                        dragOffset = IntOffset.Zero
                    }
                )
            }
            .background(Color.Blue)
            .size(50.dp)
    )
}

优化点说明 #

• 消除跳变：始终用animatedOffset作为元素的偏移，拖拽时直接更新dragOffset（动画的目标值），动画会实时跟随拖拽位置；抬手时只需将dragOffset设为IntOffset.Zero，动画会从当前位置平滑归位，无跳变。
• 修复无拖拽归位问题：拖拽开始时将dragOffset同步为当前动画值，即使未移动就抬手，dragOffset也是初始位置，设置为Zero时不会触发不必要的跳动。
• 减少延迟：去掉多余的isAnimating状态判断，直接通过更新动画目标值触发状态变化，减少状态切换带来的延迟。

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