Touch Feedback Animation, jak Spotify w Jetpack Compose

Istotne jest, aby pokazać użytkownikowi informację zwrotną o kliknięciu bla bla bal, Krótko mówiąc, efekt odbijającego się kliknięcia w Spotify podoba mi się bardziej niż domyślny efekt Ripple, więc zróbmy to

Po drodze przyjrzymy się też niektórym modyfikatorom i animacji…

Aby to zrobić, stworzymy wielokrotnego użytku Modifier(podobnie jak klikalny modyfikator), który zmniejsza skalę i krycie po naciśnięciu elementu interfejsu użytkownika.
Pójdę dalej i umieszczę cały kod, a następnie wyjaśnię…

/**
 * 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. Następnie, ponieważ mamy wiele animacji, które chcemy uruchomić, gdy isPressed == true, używamy updateTransition()tego, co zapewnia nam funkcje rozszerzające do uruchamiania wielu animacji.
2. Aby utworzyć animacje, używamy animateFloat()rozszerzenia do utworzenia dwóch animacji, jednej dla scaleFactori jednej opacity , której użyjemy do animowania naszego elementu interfejsu użytkownika.
3. Aby zmienić skalę i alfa, użyliśmy graphicsLayermodyfikatora, który jest zwykle używany do stosowania transformacji i animacji elementu interfejsu użytkownika. ( sprawdź ten wspaniały artykuł, aby dowiedzieć się więcej )
4. Na koniec dodajemy klikalny modyfikator do obsługi kliknięć i usuwamy domyślny efekt falowania, ustawiając indicationparametr nanull

To tyle, korzystajmy

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

      

To tyle, mam nadzieję, że blog wam się spodobał ❤️