Jetpack Compose 中的长按手势

Question

如何在长按时使用 Jetpack Compose 缩小动画，然后在松开时恢复正常（如 Spotify Android App 中的卡片）。

这是显示动画的 gif。

Answer 1

您可以使用 Transition 来管理按下和释放状态之间的动画。

enum class ComponentState { Pressed, Released }

var toState by remember { mutableStateOf(ComponentState.Released) }
val transition: Transition<ComponentState> = updateTransition(targetState = toState, label = "")

// Defines a float animation to scale x,y
val scalex: Float by transition.animateFloat(
    transitionSpec = { spring(stiffness = 50f) }, label = ""
) { state ->
    if (state == ComponentState.Pressed) 0.90f else 1f
}
val scaley: Float by transition.animateFloat(
    transitionSpec = { spring(stiffness = 50f) }, label = ""
) { state ->
    if (state == ComponentState.Pressed) 0.90f else 1f
}

然后你可以使用PointerInputScope.detectTapGestures来检测按压手势：

val modifier = Modifier.pointerInput(Unit) {
    detectTapGestures(
        onPress = {
            toState = ComponentState.Pressed
            tryAwaitRelease()
            toState = ComponentState.Released
        }
    )
}

最后将动画应用到您的可组合项。
例如：

Box(
    modifier
        .width((100 * scalex).dp)
        .height((100 * scaley).dp),
    contentAlignment = Alignment.Center) {

    Image(
        //...
        modifier = Modifier.graphicsLayer{
            scaleX = scalex;
            scaleY = scaley
        })
}

Jetpack Compose 中的长按手势

Long press gesture in Jetpack Compose

android

kotlin

android-jetpack-compose