แตะแอนิเมชั่นคำติชม เช่น Spotify ใน Jetpack เขียน

การแสดงคำติชมการคลิกของผู้ใช้เป็นสิ่งสำคัญ bla bla bal เรื่องยาวสั้น ฉันชอบเอฟเฟกต์การคลิกแบบเด้งของ Spotify มากกว่าเอฟเฟกต์ Ripple เริ่มต้น มาทำกันเถอะ

ระหว่างทาง เราจะสำรวจตัวปรับแต่งและแอนิเมชันด้วย...

ในการทำเช่นนั้น เราจะสร้างตัวแก้ไขที่ใช้ซ้ำได้Modifier(คล้ายกับตัวปรับแต่งแบบคลิกได้) ที่ลดขนาดและความทึบเมื่อกดองค์ประกอบ UI
ฉันจะไปข้างหน้าและใส่รหัสทั้งหมดแล้วอธิบาย ...

/**
 * 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. เนื่องจากเรามีแอนิเมชั่นหลายตัวที่เราต้องการเรียกใช้เมื่อ เราจึง isPressed == trueใช้updateTransition()ฟังก์ชันส่วนขยายเพื่อเรียกใช้แอนิเมชั่นหลายตัว
2. ในการสร้างแอนิเมชั่น เราใช้animateFloat()ส่วนขยายเพื่อสร้างแอนิเมชั่นสองแอนิเมชั่น อันหนึ่งสำหรับscaleFactorและอีกอันสำหรับopacity ที่เราจะใช้เพื่อทำให้องค์ประกอบ UI ของเราเคลื่อนไหว
3. ในการเปลี่ยนสเกล & อัลฟ่า เราใช้graphicsLayerModifier ซึ่งโดยปกติจะใช้เพื่อใช้การแปลงร่างและแอนิเมชั่นกับองค์ประกอบ UI ( อ่านบทความดีๆ นี้เพื่อเรียนรู้เพิ่มเติม )
4. สุดท้าย เราเพิ่มตัวแก้ไขที่คลิกได้เพื่อจัดการการคลิกและลบเอฟเฟกต์ระลอกเริ่มต้นโดยตั้งค่าindicationพารามิเตอร์เป็นnull

เท่านี้ก็นำไปใช้ได้เลย

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

      
                

                    
                    
                
            

ฉันหวังว่าคุณจะชอบบล็อกนี้ ❤️