ऐनिमेशन को पसंद के मुताबिक बनाएं

कई ऐनिमेशन एपीआई, आम तौर पर अपनी ज़रूरत के मुताबिक व्यवहार.

AnimationSpec पैरामीटर से ऐनिमेशन को पसंद के मुताबिक बनाएं

ज़्यादातर ऐनिमेशन एपीआई, डेवलपर को ऐनिमेशन की खास जानकारी को AnimationSpec पैरामीटर ज़रूरी नहीं है.

val alpha: Float by animateFloatAsState(
    targetValue = if (enabled) 1f else 0.5f,
    // Configure the animation duration and easing.
    animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
AnimationSnippets.kt

AnimationSpec कई तरह के होते हैं, जिनका इस्तेमाल अलग-अलग तरह के ऐनिमेशन.

spring की मदद से, फ़िज़िक्स पर आधारित ऐनिमेशन बनाएं

spring, शुरू और खत्म होने की वैल्यू के बीच फ़िज़िक्स पर आधारित ऐनिमेशन बनाता है. यह इसके दो पैरामीटर होते हैं: dampingRatio और stiffness.

dampingRatio तय करता है कि वसंत के मौसम में कितना बाउंस होना चाहिए. डिफ़ॉल्ट मान यह है Spring.DampingRatioNoBouncy.

पहला डायग्राम. वसंत में नमी बनाए रखने के लिए अलग-अलग अनुपात सेट किए जा रहे हैं.

stiffness से पता चलता है कि स्प्रिंग को आखिरी वैल्यू की ओर कितनी तेज़ी से जाना चाहिए. कॉन्टेंट बनाने डिफ़ॉल्ट वैल्यू Spring.StiffnessMedium है.

दूसरी इमेज. स्प्रिंग के दौरान अलग-अलग कड़ेपन सेट करना

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    )
)
AnimationSnippets.kt

कुल समय के हिसाब से, spring रुकावटों को ज़्यादा आसानी से हैंडल कर सकता है AnimationSpec टाइप का इस्तेमाल करता है, क्योंकि यह रफ़्तार की निरंतरता की गारंटी देता है. ऐसा तब होता है, जब ऐनिमेशन के बीच टारगेट वैल्यू में बदलाव. spring को डिफ़ॉल्ट के तौर पर इस्तेमाल किया गया है कई एनिमेशन एपीआई के ज़रिए, एनिमेशन से जुड़ी जानकारी देने वाले कई एपीआई. जैसे, animate*AsState और updateTransition.

उदाहरण के लिए, अगर हम उपयोगकर्ता के टच से चलने वाले नीचे दिए गए ऐनिमेशन के लिए spring कॉन्फ़िगरेशन लागू करते हैं, तो ऐनिमेशन में रुकावट आने पर यह देखा जा सकता है कि tween का इस्तेमाल करने पर, spring का इस्तेमाल करने जितना आसान प्रोसेस नहीं होता.

तीसरी इमेज. ऐनिमेशन के लिए tween बनाम spring की विशेषताओं को सेट करना और इसे रोकना.

tween के साथ ईज़िंग कर्व के साथ प्रारंभ और समाप्ति मानों के बीच ऐनिमेट करें

tween तय किए गए समय पर, शुरू और खत्म होने की वैल्यू के बीच ऐनिमेट होता है ईज़िंग कर्व का इस्तेमाल करके durationMillis. tween, शब्द के बीच छोटा है - क्योंकि यह दो वैल्यू के बीच तक चला जाता है.

ऐनिमेशन की शुरुआत को आगे बढ़ाने के लिए, delayMillis भी तय किया जा सकता है.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    )
)
AnimationSnippets.kt

ज़्यादा जानकारी के लिए, ईज़िंग देखें.

keyframes की मदद से, किसी खास समय पर किसी वैल्यू पर ऐनिमेशन का इस्तेमाल करें

keyframes अलग-अलग ऐनिमेशन के दौरान टाइमस्टैंप. किसी दिए गए समय पर, ऐनिमेशन वैल्यू को दो कीफ़्रेम वैल्यू के बीच इंटरपोलेट किया जाएगा. इन सभी के लिए कीफ़्रेम, इंटरपोलेशन कर्व को तय करने के लिए ईज़िंग को तय किया जा सकता है.

वैल्यू को 0 मि॰से॰ और तय किए गए समय पर सेट करना ज़रूरी नहीं है. अगर आपके पास इन मानों को निर्दिष्ट नहीं करते, तो वे डिफ़ॉल्ट रूप से ऐनिमेशन का इस्तेमाल किया है.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    }
)
AnimationSnippets.kt

repeatable के साथ ऐनिमेशन दोहराएं

repeatable अवधि के हिसाब से ऐनिमेशन चलाता है (जैसे कि tween या keyframes) तय संख्या तक पहुंचने तक बार-बार दोहराते रहें. आप यह बताने के लिए repeatMode पैरामीटर कि ऐनिमेशन को इस तारीख तक दोहराना है या नहीं फिर से शुरू करना (RepeatMode.Restart) या फिर आखिर से (RepeatMode.Reverse).

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

infiniteRepeatable के साथ किसी ऐनिमेशन को असीमित समय तक दोहराएं

infiniteRepeatable, repeatable की तरह है, लेकिन इसे असीमित समय तक दोहराया जाता है बार-बार किया जा सकता है.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

इसका इस्तेमाल करके टेस्ट करने में ComposeTestRule infiniteRepeatable का इस्तेमाल करने वाले ऐनिमेशन नहीं चलाए जा रहे हैं. यह कॉम्पोनेंट होगा रेंडर करने के लिए, ऐनिमेशन वाली हर वैल्यू की शुरुआती वैल्यू का इस्तेमाल किया जाता है.

snap के साथ समाप्ति मान में तुरंत स्नैप करें

snap एक खास AnimationSpec है, जो वैल्यू को तुरंत खत्म होने का मान. आप इसकी शुरुआत में देरी करने के लिए delayMillis तय कर सकते हैं ऐनिमेशन.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50)
)
AnimationSnippets.kt

कस्टम ईज़िंग फ़ंक्शन सेट करें

कुल समय के आधार पर AnimationSpec कार्रवाइयों (जैसे कि tween या keyframes) का इस्तेमाल किसी ऐनिमेशन के हिस्से को अडजस्ट करने के लिए, Easing का इस्तेमाल करें. इससे ऐनिमेटिंग वैल्यू को लगातार चलने के बजाय, उसकी गति को बढ़ा और धीमा कर सकते हैं. अंश एक है 0 (start) और 1.0 (end) के बीच की वैल्यू, जो ऐनिमेशन.

ईज़िंग एक ऐसा फ़ंक्शन है जो 0 और 1.0 के बीच का कोई फ़्रैक्शन वैल्यू लेता है फ़्लोट वैल्यू दिखाता है. दिखाया जाने वाला मान, सीमा से बाहर हो सकता है ओवरशूट या अंडरशूट. नीचे दिए गए कोड की तरह, पसंद के मुताबिक ईज़िंग बनाई जा सकती है.

val CustomEasing = Easing { fraction -> fraction * fraction }

@Composable
fun EasingUsage() {
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        )
    )
    // ……
}
AnimationSnippets.kt

Compose में Easing पहले से मौजूद कई फ़ंक्शन मौजूद हैं. इनमें, इस्तेमाल के ज़्यादातर उदाहरण शामिल होते हैं. ज़्यादा जानकारी के लिए स्पीड - मटीरियल डिज़ाइन देखें ईज़िंग की सुविधा के बारे में जानकारी.

• FastOutSlowInEasing
• LinearOutSlowInEasing
• FastOutLinearEasing
• LinearEasing
• CubicBezierEasing
• ज़्यादा देखें

AnimationVector में और उससे बदलकर कस्टम डेटा टाइप को ऐनिमेट करें

ज़्यादातर Compose के ऐनिमेशन एपीआई Float, Color, Dp, और अन्य बुनियादी डेटा के साथ काम करते हैं टाइप को डिफ़ॉल्ट रूप से ऐनिमेशन वैल्यू के तौर पर सेट किया जाता है, लेकिन कभी-कभी आपको ऐनिमेशन की ज़रूरत पड़ेगी अन्य डेटा टाइप के साथ-साथ आपके कस्टम डेटा को भी शामिल किया जाएगा. ऐनिमेशन के दौरान, किसी भी ऐनिमेशन वैल्यू को AnimationVector के तौर पर दिखाया जाता है. वैल्यू को AnimationVector को और संबंधित TwoWayConverter से इसका उलटा मिलता है, ताकि मुख्य ऐनिमेशन सिस्टम उन्हें एक ही तरह से हैंडल कर सकता है. उदाहरण के लिए, Int को AnimationVector1D के तौर पर दिखाया जाता है. इसमें सिंगल फ़्लोट वैल्यू होती है. Int के लिए TwoWayConverter ऐसा दिखता है:

val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
    TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
AnimationSnippets.kt

Color आवश्यक रूप से 4 मानों, लाल, हरा, नीला, और अल्फ़ा का सेट है, इसलिए Color को AnimationVector4D में बदला जाता है, जिसमें चार फ़्लोट वैल्यू होती हैं. तय सीमा में इस तरह से, ऐनिमेशन में इस्तेमाल किया जाने वाला हर डेटा टाइप, AnimationVector1D, AnimationVector2D, AnimationVector3D या AnimationVector4D, इसकी डाइमेंशन क्वालिटी के आधार पर तय होता है. इससे अलग-अलग ऑब्जेक्ट के अलग-अलग कॉम्पोनेंट के साथ, उन्हें अलग-अलग ऐनिमेशन के साथ ऐनिमेट करें से मिल रहे हैं. बुनियादी डेटा टाइप के लिए, पहले से मौजूद कन्वर्टर को ऐक्सेस किया जा सकता है Color.VectorConverter या Dp.VectorConverter जैसे कन्वर्टर का इस्तेमाल करके.

जब आपको ऐनिमेशन वैल्यू के तौर पर, नए डेटा टाइप के लिए सहायता जोड़नी हो, तो ये काम किए जा सकते हैं अपना TwoWayConverter बनाएं और उसे एपीआई को उपलब्ध कराएं. उदाहरण के लिए, आपके animateValueAsState का इस्तेमाल करके, आपके कस्टम डेटा टाइप को इस तरह ऐनिमेट कर सकता है:

data class MySize(val width: Dp, val height: Dp)

@Composable
fun MyAnimation(targetSize: MySize) {
    val animSize: MySize by animateValueAsState(
        targetSize,
        TwoWayConverter(
            convertToVector = { size: MySize ->
                // Extract a float value from each of the `Dp` fields.
                AnimationVector2D(size.width.value, size.height.value)
            },
            convertFromVector = { vector: AnimationVector2D ->
                MySize(vector.v1.dp, vector.v2.dp)
            }
        )
    )
}
AnimationSnippets.kt

नीचे दी गई सूची में, पहले से मौजूद कुछ VectorConverter शामिल हैं:

• Color.VectorConverter
• Dp.VectorConverter
• Offset.VectorConverter
• Int.VectorConverter
• Float.VectorConverter
• IntSize.VectorConverter

{% endverba नया %}

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• वैल्यू के हिसाब से ऐनिमेशन
• इटरेटिव कोड डेवलपमेंट {:#iterative-code-dev }
• Compose में ऐनिमेशन

{% verbatim %}