Sentuh Animasi Umpan Balik seperti Spotify di Jetpack Compose

Sangat penting untuk menunjukkan umpan balik klik pengguna bla bla bal, Singkat cerita, saya lebih suka efek klik pantulan Spotify daripada efek Ripple default, jadi mari kita lakukan

Sepanjang jalan, kita akan menjelajahi beberapa pengubah dan animasi juga…

Untuk melakukannya, kita akan membuat pengubah yang dapat digunakan kembali Modifier(mirip dengan pengubah yang dapat diklik) yang mengurangi skala dan opasitas saat elemen UI ditekan.
Saya akan melanjutkan dan meletakkan semua kode dan kemudian menjelaskannya…

/**
 * 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. Kemudian karena kami memiliki banyak animasi yang ingin kami jalankan kapan isPressed == true, kami menggunakan updateTransition()yang memberi kami fungsi ekstensi untuk menjalankan banyak animasi.
2. Untuk membuat animasi, kami menggunakan animateFloat()ekstensi untuk membuat dua animasi, satu untuk scaleFactordan satu untuk opacity yang akan kami gunakan untuk menganimasikan elemen UI kami.
3. Untuk mengubah skala & alfa kami menggunakan graphicsLayerPengubah yang biasanya digunakan untuk menerapkan transformasi dan animasi ke elemen UI. ( lihat artikel bagus ini untuk mempelajari lebih lanjut )
4. Terakhir, kami menambahkan pengubah yang dapat diklik untuk menangani klik dan menghapus efek riak default dengan menyetel indicationparam kenull

Itu dia, mari kita gunakan

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

      
                

                    
                    
                
            

Itu saja, saya harap Anda menyukai blog ini ❤️