Touch Feedback Animation come Spotify in Jetpack Compose

È essenziale mostrare all'utente il feedback del clic bla bla bal, Per farla breve, mi piace l'effetto del clic che rimbalza di Spotify più dell'effetto Ripple predefinito, quindi facciamolo

Lungo la strada, esploreremo anche alcuni modificatori e animazioni...

Per farlo creeremo un riutilizzabile Modifier(simile al modificatore cliccabile) che diminuisce la scala e l'opacità quando viene premuto l'elemento dell'interfaccia utente.
Andrò avanti e inserirò tutto il codice e poi lo spiegherò ...

/**
 * Adds a bouncing click effect to a Composable.
 *
 * @param enabled whether the UI element should be enabled and clickable
 * @param onClick the action to perform when the UI element is clicked
 */
fun Modifier.bouncingClickable(
    enabled: Boolean = true,
    onClick: () -> Unit
) = composed {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    val animationTransition = updateTransition(isPressed, label = "BouncingClickableTransition")
    val scaleFactor by animationTransition.animateFloat(
        targetValueByState = { pressed -> if (pressed) 0.94f else 1f },
        label = "BouncingClickableScaleFactorTransition",
    )
    val opacity by animationTransition.animateFloat(
        targetValueByState = { pressed -> if (pressed) 0.7f else 1f },
        label = "BouncingClickableOpacityTransition"
    )

    this
        .graphicsLayer {
            this.scaleX = scaleFactor
            this.scaleY = scaleFactor
            this.alpha = opacity
        }
        .clickable(
            interactionSource = interactionSource,
            indication = null,
            enabled = enabled,
            onClick = onClick
        )
}

1. Quindi, poiché abbiamo più animazioni che vogliamo eseguire quando isPressed == true, usiamo updateTransition()che ci fornisce funzioni di estensione per eseguire più animazioni.
2. Per creare le animazioni, usiamo animateFloat()l'estensione per creare due animazioni, una per scaleFactore una per opacity quella che useremo per animare il nostro elemento dell'interfaccia utente.
3. Per modificare la scala e l'alfa abbiamo utilizzato graphicsLayerModifier, che di solito viene utilizzato per applicare trasformazioni e animazioni a un elemento dell'interfaccia utente. ( dai un'occhiata a questo fantastico articolo per saperne di più )
4. Infine, aggiungiamo un modificatore cliccabile per gestire il clic e rimuovere l'effetto a catena predefinito impostando indicationparam sunull

Ecco, usiamolo

Box(
    modifier = Modifier
        .bouncingClickable {
            println("Clicked...")
        }
        .size(100.dp)
        .clip(CircleShape)
        .background(Color.Black)
) {}

      

val scaleFactor by animationTransition.animateFloat(
    targetValueByState = { pressed -> if (pressed) 0.94f else 1f },
    label = "BouncingClickableScaleFactorTransition",
    transitionSpec = {
        spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    }
)

      

Ecco fatto, spero che il blog ti sia piaciuto ❤️