Animação de feedback de toque como o Spotify no Jetpack Compose

É essencial mostrar ao usuário o feedback do clique bla bla bal, Resumindo, gosto mais do efeito de clique saltitante do Spotify do que do efeito Ripple padrão, então vamos lá

Ao longo do caminho, vamos explorar alguns modificadores e animações também…

Para fazer isso, criaremos um reutilizável Modifier(semelhante ao modificador clicável) que diminui a escala e a opacidade quando o elemento da interface do usuário é pressionado.
Eu irei em frente e colocarei todo o código e então explico…

/**
 * 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. Então, como temos várias animações que queremos executar quando isPressed == true, usamos updateTransition()isso nos fornece funções de extensão para executar várias animações.
2. Para criar as animações, usamos animateFloat()a extensão para criar duas animações, uma para scaleFactore outra para opacity a qual usaremos para animar nosso elemento de interface do usuário.
3. Para alterar a escala e o alfa, usamos graphicsLayero Modifier, que geralmente é usado para aplicar transformações e animações a um elemento da interface do usuário. ( confira este ótimo artigo para saber mais )
4. Por fim, adicionamos um modificador clicável para lidar com o clique e removemos o efeito cascata padrão definindo o parâmetro indicationcomonull

É isso, vamos usar

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

      
                

                    
                    
                
            

É isso, espero que tenham gostado do blog ❤️