ऐनिमेशन मॉडिफ़ायर और कंपोज़ेबल

Compose में, ऐनिमेशन के सामान्य इस्तेमाल के उदाहरणों को मैनेज करने के लिए, पहले से मौजूद कंपोज़ेबल और मॉडिफ़ायर होते हैं.

पहले से मौजूद ऐनिमेटेड कंपोज़ेबल

Compose में कई कंपोज़ेबल मौजूद हैं. इनकी मदद से, कॉन्टेंट के दिखने, गायब होने, और लेआउट में होने वाले बदलावों को ऐनिमेट किया जा सकता है.

कॉन्टेंट के दिखने और गायब होने को ऐनिमेट करना

ग्रीन कंपोज़ेबल, खुद को दिखाता और छिपाता हुआ
पहली इमेज. कॉलम में किसी आइटम के दिखने और गायब होने को ऐनिमेट करना.

The AnimatedVisibility कंपोज़ेबल, अपने कॉन्टेंट के दिखने और गायब होने को ऐनिमेट करता है.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}

डिफ़ॉल्ट रूप से, कॉन्टेंट फ़ेड इन और बड़ा होकर दिखता है. वहीं, फ़ेड आउट और छोटा होकर गायब होता है. EnterTransition और ExitTransition ऑब्जेक्ट तय करके, इस ट्रांज़िशन को पसंद के मुताबिक बनाया जा सकता है.

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text(
        "Hello",
        Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}

जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है, + ऑपरेटर की मदद से, एक से ज़्यादा EnterTransition या ExitTransition ऑब्जेक्ट को जोड़ा जा सकता है. साथ ही, हर ऑब्जेक्ट के व्यवहार को पसंद के मुताबिक बनाने के लिए, वैकल्पिक पैरामीटर इस्तेमाल किए जा सकते हैं. ज़्यादा जानकारी के लिए, रेफ़रंस पेज देखें.

एंटर और एक्ज़िट ट्रांज़िशन के उदाहरण

EnterTransition ExitTransition
fadeIn
यूज़र इंटरफ़ेस (यूआई) एलिमेंट धीरे-धीरे दिखता है. 		fadeOut
यूज़र इंटरफ़ेस (यूआई) एलिमेंट धीरे-धीरे धुंधला हो जाता है.
slideIn
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, स्क्रीन से बाहर से स्लाइड करके व्यू में आता है. 		slideOut
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, स्क्रीन से बाहर की ओर स्लाइड होता है.
slideInHorizontally
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, हॉरिज़ॉन्टल रूप से स्लाइड करके दिखता है. 		slideOutHorizontally
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, हॉरिज़ॉन्टल तौर पर स्लाइड होकर व्यू से बाहर चला जाता है.
slideInVertically
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, वर्टिकल तौर पर स्लाइड होकर दिखता है. 		slideOutVertically
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, वर्टिकल तौर पर स्लाइड होकर व्यू से बाहर चला जाता है.
scaleIn
यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बड़ा करके दिखाया गया है. 		scaleOut
यूज़र इंटरफ़ेस (यूआई) एलिमेंट छोटा हो जाता है और दिखता नहीं है.
expandIn
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, बीच के पॉइंट से बड़ा होकर व्यू में दिखता है. 		shrinkOut
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, स्क्रीन के बीच में मौजूद किसी पॉइंट पर छोटा हो जाता है और फिर गायब हो जाता है.
expandHorizontally
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, हॉरिज़ॉन्टली बड़ा होकर दिखता है. 		shrinkHorizontally
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, हॉरिज़ॉन्टल तौर पर छोटा होकर व्यू से बाहर चला जाता है.
expandVertically
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, वर्टिकल तौर पर बड़ा होकर दिखता है. 		shrinkVertically
यूज़र इंटरफ़ेस (यूआई) एलिमेंट, वर्टिकल तौर पर छोटा होकर व्यू से बाहर चला जाता है.

AnimatedVisibility का एक ऐसा वर्शन भी उपलब्ध है जो MutableTransitionState आर्ग्युमेंट लेता है. इससे, कंपोज़िशन ट्री में AnimatedVisibility कंपोज़ेबल के जुड़ते ही ऐनिमेशन ट्रिगर किया जा सकता है. यह ऐनिमेशन की स्थिति को देखने के लिए भी काम का है.

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }

    // Use the MutableTransitionState to know the current animation state
    // of the AnimatedVisibility.
    Text(
        text = when {
            state.isIdle && state.currentState -> "Visible"
            !state.isIdle && state.currentState -> "Disappearing"
            state.isIdle && !state.currentState -> "Invisible"
            else -> "Appearing"
        }
    )
}

चाइल्ड के लिए एंटर और एक्ज़िट ऐनिमेशन

AnimatedVisibility में मौजूद कॉन्टेंट (डायरेक्ट या इनडायरेक्ट चाइल्ड), animateEnterExit का इस्तेमाल करके, हर कॉन्टेंट के लिए अलग-अलग ऐनिमेशन का व्यवहार तय कर सकता है. इनमें से हर चाइल्ड के लिए दिखने वाला इफ़ेक्ट, AnimatedVisibility कंपोज़ेबल में तय किए गए ऐनिमेशन और चाइल्ड के अपने एंटर और एक्ज़िट ऐनिमेशन का कॉम्बिनेशन होता है.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.DarkGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content of the notification…
        }
    }
}

कुछ मामलों में, हो सकता है कि आपको AnimatedVisibility में कोई ऐनिमेशन लागू न करना हो, ताकि animateEnterExit की मदद से हर चाइल्ड के लिए अलग-अलग ऐनिमेशन तय किए जा सकें. ऐसा करने के लिए, AnimatedVisibility कंपोज़ेबल में EnterTransition.None और ExitTransition.None तय करें.

कस्टम ऐनिमेशन जोड़ना

अगर आपको एंटर और एक्ज़िट के पहले से मौजूद ऐनिमेशन के अलावा, कस्टम ऐनिमेशन इफ़ेक्ट जोड़ने हैं, तो AnimatedVisibility के लिए कॉन्टेंट लैम्डा में मौजूद transition प्रॉपर्टी का इस्तेमाल करके, इसके लिए बने Transition इंस्टेंस को ऐक्सेस करें. Transition इंस्टेंस में जोड़े गए सभी ऐनिमेशन की स्थितियां, AnimatedVisibility के एंटर और एक्ज़िट ऐनिमेशन के साथ-साथ चलेंगी. AnimatedVisibility , अपना कॉन्टेंट हटाने से पहले, Transition में मौजूद सभी ऐनिमेशन के खत्म होने का इंतज़ार करता है. Transition से अलग बनाए गए एक्ज़िट ऐनिमेशन (जैसे, animate*AsState का इस्तेमाल करके), AnimatedVisibility के लिए काम नहीं करेंगे. इसलिए, हो सकता है कि वे खत्म होने से पहले ही, कॉन्टेंट कंपोज़ेबल को हटा दें.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) { // this: AnimatedVisibilityScope
    // Use AnimatedVisibilityScope#transition to add a custom animation
    // to the AnimatedVisibility.
    val background by transition.animateColor(label = "color") { state ->
        if (state == EnterExitState.Visible) Color.Blue else Color.Gray
    }
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(background)
    )
}

ऐनिमेशन मैनेज करने के लिए, Transition का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, ट्रांज़िशन की मदद से एक साथ कई प्रॉपर्टी को ऐनिमेट करना लेख पढ़ें.

टारगेट स्थिति के आधार पर ऐनिमेट करना

AnimatedContent कंपोज़ेबल, टारगेट स्थिति के आधार पर बदलने वाले कॉन्टेंट को ऐनिमेट करता है.

Row {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Add")
    }
    AnimatedContent(
        targetState = count,
        label = "animated content"
    ) { targetCount ->
        // Make sure to use `targetCount`, not `count`.
        Text(text = "Count: $targetCount")
    }
}

डिफ़ॉल्ट रूप से, शुरुआती कॉन्टेंट फ़ेड आउट होता है. इसके बाद, टारगेट कॉन्टेंट फ़ेड इन होता है . इस व्यवहार को फ़ेड थ्रू कहा जाता है. transitionSpec पैरामीटर में ContentTransform ऑब्जेक्ट तय करके, इस ऐनिमेशन के व्यवहार को पसंद के मुताबिक बनाया जा सकता है. `with` इनफ़िक्स फ़ंक्शन का इस्तेमाल करके, `ExitTransition` ऑब्जेक्ट को `EnterTransition` ऑब्जेक्ट के साथ जोड़कर, `ContentTransform` का इंस्टेंस बनाया जा सकता है. using इनफ़िक्स फ़ंक्शन से जोड़कर, ContentTransform ऑब्जेक्ट पर SizeTransform लागू किया जा सकता है.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }, label = "animated content"
) { targetCount ->
    Text(text = "$targetCount")
}

EnterTransition से तय होता है कि टारगेट कॉन्टेंट कैसे दिखेगा. वहीं, ExitTransition से तय होता है कि शुरुआती कॉन्टेंट कैसे गायब होगा. के लिए उपलब्ध सभी EnterTransition और ExitTransition फ़ंक्शन के अलावा, AnimatedVisibility, AnimatedContent slideIntoContainer और slideOutOfContainer भी उपलब्ध कराता है. ये slideInHorizontally/Vertically और slideOutHorizontally/Vertically के सुविधाजनक विकल्प हैं. ये AnimatedContent कॉन्टेंट के शुरुआती कॉन्टेंट और टारगेट कॉन्टेंट के साइज़ के आधार पर, स्लाइड की दूरी का हिसाब लगाते हैं.

SizeTransform से तय होता है कि शुरुआती और टारगेट कॉन्टेंट के बीच, साइज़ को कैसे ऐनिमेट किया जाना चाहिए. ऐनिमेशन बनाते समय, आपके पास शुरुआती और टारगेट, दोनों साइज़ का ऐक्सेस होता है. SizeTransform यह भी कंट्रोल करता है कि ऐनिमेशन के दौरान, कॉन्टेंट को कॉम्पोनेंट के साइज़ के हिसाब से क्लिप किया जाना चाहिए या नहीं.

var expanded by remember { mutableStateOf(false) }
Surface(
    color = MaterialTheme.colorScheme.primary,
    onClick = { expanded = !expanded }
) {
    AnimatedContent(
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(150, 150)) togetherWith
                fadeOut(animationSpec = tween(150)) using
                SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
        }, label = "size transform"
    ) { targetExpanded ->
        if (targetExpanded) {
            Expanded()
        } else {
            ContentIcon()
        }
    }
}

चाइल्ड के एंटर और एक्ज़िट ट्रांज़िशन को ऐनिमेट करना

AnimatedVisibility की तरह, animateEnterExit मॉडिफ़ायर, AnimatedContent के कॉन्टेंट लैम्डा में भी उपलब्ध है. इसका इस्तेमाल करके, डायरेक्ट या इनडायरेक्ट चाइल्ड में से हर एक पर अलग-अलग EnterAnimation और ExitAnimation लागू करें.

कस्टम ऐनिमेशन जोड़ना

AnimatedVisibility की तरह, transition फ़ील्ड, AnimatedContent के कॉन्टेंट लैम्डा में भी उपलब्ध है. इसका इस्तेमाल करके, कस्टम ऐनिमेशन इफ़ेक्ट बनाएं. यह AnimatedContent ट्रांज़िशन के साथ-साथ चलता है. ज़्यादा जानकारी के लिए, updateTransition देखें.

दो लेआउट के बीच ऐनिमेट करना

Crossfade, दो लेआउट के बीच क्रॉसफ़ेड ऐनिमेशन के साथ ऐनिमेट करता है. current पैरामीटर को पास की गई वैल्यू को टॉगल करने पर, कॉन्टेंट को क्रॉसफ़ेड ऐनिमेशन के साथ स्विच किया जाता है.

var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}

पहले से मौजूद ऐनिमेशन मॉडिफ़ायर

Compose में, कंपोज़ेबल पर सीधे तौर पर खास बदलावों को ऐनिमेट करने के लिए मॉडिफ़ायर उपलब्ध हैं.

कंपोज़ेबल के साइज़ में होने वाले बदलावों को ऐनिमेट करना

हरे रंग का कंपोज़ेबल, जिसके साइज़ में आसानी से बदलाव हो रहा है.
दूसरी इमेज. कंपोज़ेबल, छोटे और बड़े साइज़ के बीच आसानी से ऐनिमेट हो रहा है

animateContentSize मॉडिफ़ायर, साइज़ में होने वाले बदलाव को ऐनिमेट करता है.

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}

सूची में शामिल आइटम के ऐनिमेशन

अगर आपको लेज़ी लिस्ट या ग्रिड में आइटम के क्रम में होने वाले बदलावों को ऐनिमेट करना है, तो लेज़ी लेआउट आइटम ऐनिमेशन का दस्तावेज़ देखें.

पीछे जाएं
तुरंत मदद पाने के लिए गाइड
आगे बढ़ें
वैल्यू के हिसाब से ऐनिमेशन