Touch Feedback Animation comme Spotify dans Jetpack Compose

Il est essentiel de montrer à l'utilisateur les commentaires sur les clics bla bla bal, Bref, j'aime plus l'effet de clic rebondissant de Spotify que l'effet d'ondulation par défaut, alors faisons-le

En cours de route, nous explorerons également quelques modificateurs et animations…

Pour ce faire, nous allons créer un réutilisable Modifier(similaire au modificateur cliquable) qui diminue l' échelle et l'opacité lorsque l'élément de l'interface utilisateur est pressé.
Je vais aller de l'avant et mettre tout le code, puis l'expliquer…

/**
 * 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. Ensuite, puisque nous avons plusieurs animations que nous voulons exécuter lorsque isPressed == true, nous utilisons updateTransition()cela nous fournit des fonctions d'extension pour exécuter plusieurs animations.
2. Pour créer les animations, nous utilisons animateFloat()l'extension pour créer deux animations, une pour scaleFactoret une pour opacity celle que nous utiliserons pour animer notre élément d'interface utilisateur.
3. Pour modifier l'échelle et l'alpha, nous avons utilisé graphicsLayerle modificateur qui est généralement utilisé pour appliquer des transformations et des animations à un élément de l'interface utilisateur. ( consultez cet excellent article pour en savoir plus )
4. Enfin, nous ajoutons un modificateur cliquable pour gérer le clic et supprimons l'effet d'entraînement par défaut en définissant indicationparam surnull

Voilà, profitons-en

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
        )
    }
)

      

Voilà, j'espère que vous avez aimé le blog ❤️