Animación de retroalimentación táctil como Spotify en Jetpack Compose

Es esencial mostrarle al usuario los comentarios de los clics, bla bla bal. Para resumir, me gusta más el efecto de clic de rebote de Spotify que el efecto Ripple predeterminado, así que hagámoslo

En el camino, también exploraremos algunos modificadores y animaciones...

Para hacerlo, crearemos un reutilizable Modifier(similar al modificador en el que se puede hacer clic) que disminuye la escala y la opacidad cuando se presiona el elemento de la interfaz de usuario.
Continuaré y pondré todo el código y luego lo explicaré...

/**
 * 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. Luego, dado que tenemos múltiples animaciones que queremos ejecutar cuando isPressed == true, usamos updateTransition()eso que nos proporciona funciones de extensión para ejecutar múltiples animaciones.
2. Para crear las animaciones, usamos animateFloat()la extensión para crear dos animaciones, una para scaleFactory otra para opacity que usaremos para animar nuestro elemento de interfaz de usuario.
3. Para cambiar la escala y el alfa, usamos graphicsLayerel Modificador, que generalmente se usa para aplicar transformaciones y animaciones a un elemento de la interfaz de usuario. ( Consulta este excelente artículo para obtener más información )
4. Finalmente, agregamos un modificador en el que se puede hacer clic para controlar el clic y eliminar el efecto dominó predeterminado configurando indicationparam ennull

Eso es todo, vamos a usarlo

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

      
                

                    
                    
                
            

Eso es todo, espero que les haya gustado el blog ❤️