Jetpack Compose में Spotify जैसे फ़ीडबैक एनिमेशन को स्पर्श करें

यह आवश्यक है कि उपयोगकर्ता क्लिक प्रतिक्रिया ब्ला ब्ला बल दिखाएँ, लंबी कहानी छोटी मुझे डिफ़ॉल्ट रिपल प्रभाव से अधिक Spotify का बाउंसिंग क्लिक प्रभाव पसंद है तो चलिए इसे करते हैं

रास्ते में, हम कुछ संशोधक और एनीमेशन भी तलाशेंगे…

Modifierऐसा करने के लिए हम एक पुन: प्रयोज्य (क्लिक करने योग्य संशोधक के समान) बनाएंगे जो यूआई तत्व दबाए जाने पर पैमाने और अस्पष्टता को कम करता है।
मैं आगे बढ़ूंगा और सभी कोड डालूंगा और फिर उसे समझाऊंगा ...

/**
 * 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 हम अपने यूआई तत्व को चेतन करने के लिए उपयोग करेंगे।
3. पैमाने और अल्फा को बदलने के लिए हमने graphicsLayerसंशोधक का उपयोग किया जो आमतौर पर यूआई तत्व में परिवर्तन और एनिमेशन लागू करने के लिए उपयोग किया जाता है। ( अधिक जानने के लिए इस महान लेख को देखें )
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
        )
    }
)

      
                

                    
                    
                
            

बस, मुझे उम्मीद है कि आपको ब्लॉग ❤️ पसंद आया होगा