Compose 中的弹跳按钮动画

Question

我想在 Compose 中制作一个这样的按钮： https://pub.dev/packages/flutter_bounceable

但是可点击的方法在我的代码中不起作用。

我试过这段代码，但它有一个错误。 按下按钮，但没有任何动作。 动画效果很好，但不适用于可点击的。

fun Modifier.bounceClick(onClick: () -> Unit,animationDuration: Int = 100,
                         scaleDown: Float = 0.9f) = composed {
    val interactionSource = MutableInteractionSource()

    val coroutineScope = rememberCoroutineScope()

    val scale = remember {
        Animatable(1f)
    }

    this
        .scale(scale = scale.value)
        .background(
            color = Color(0xFF35898F),
            shape = RoundedCornerShape(size = 12f)
        )
        .clickable(interactionSource = interactionSource, indication = null, onClick = onClick)
        .pointerInput(Unit) {
            while(true)
                awaitPointerEventScope {
                        awaitFirstDown()
                        coroutineScope.launch {
                            scale.animateTo(
                                scaleDown,
                                animationSpec = tween(animationDuration),
                            )
                        }
                        waitForUpOrCancellation()
                        coroutineScope.launch {
                            scale.animateTo(
                                scaleDown,
                                animationSpec = tween(20),
                            )
                            scale.animateTo(
                                1f,
                                animationSpec = tween(animationDuration),
                            )
                    }
            }
        }
}

Answer 1

使用 Compose 可以很简单地做到这一点。

如果 Compose 版本是 1.4.0-alpha03 且使用 Modifier.pointerInput 而不是 while，则应使用 foreachGesture 或 awaitEachGesture。此外，当您可以点击时，您也不需要 Modifier.pointerInput，您也可以使用它们中的每一个。

我将仅演示如何使用 Modifier.clickable 和 interactionSource.collectIsPressedAsState() 进行操作，如下所示。

结果

执行

fun Modifier.bounceClick(
    animationDuration: Int = 100,
    scaleDown: Float = 0.9f,
    onClick: () -> Unit
) = composed {

    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    val animatable = remember {
        Animatable(1f)
    }

    LaunchedEffect(key1 = isPressed) {
        if (isPressed) {
            animatable.animateTo(scaleDown)
        } else animatable.animateTo(1f)
    }

    Modifier
        .graphicsLayer {
            val scale = animatable.value
            scaleX = scale
            scaleY = scale
        }
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) {
            onClick()
        }
}

用法

@Composable
private fun BounceExample() {
    Row {
        Box(
            Modifier

                .background(Color.Red, RoundedCornerShape(10.dp))
                .bounceClick {

                }
                .padding(10.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Hello World", color = Color.White, fontSize = 20.sp)
        }
        Spacer(modifier = Modifier.width(10.dp))

        Box(
            Modifier

                .bounceClick {

                }
                .background(Color.Green, RoundedCornerShape(10.dp))
                .padding(10.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Hello World", color = Color.White, fontSize = 20.sp)
        }
    }
}