Compose में ऐनिमेशन के इस्तेमाल के लिए गाइड

Compose में ऐनिमेशन के कई तरीके पहले से मौजूद होते हैं. ऐसे में, यह तय करना मुश्किल हो सकता है कि इनमें से किस तरीके का इस्तेमाल करना है. नीचे ऐनिमेशन के इस्तेमाल के कुछ सामान्य उदाहरणों की सूची दी गई है. आपके लिए उपलब्ध एपीआई के अलग-अलग विकल्पों के पूरे सेट के बारे में ज़्यादा जानकारी के लिए, ऐनिमेशन बनाने के लिए दस्तावेज़ पढ़ें.

कंपोज़ेबल प्रॉपर्टी में ऐनिमेशन जोड़ें

Compose आसान एपीआई उपलब्ध कराता है. इससे आपको कई सामान्य समस्याओं को हल करने में मदद मिलती है ऐनिमेशन के इस्तेमाल के उदाहरण. इस सेक्शन में, किसी कॉम्पोज़ेबल की सामान्य प्रॉपर्टी को ऐनिमेट करने का तरीका बताया गया है.

ऐनिमेशन के साथ दिखना / गायब होना

पहली इमेज. कॉलम में किसी आइटम के दिखने और गायब होने का ऐनिमेशन करना

किसी Composable को छिपाने या दिखाने के लिए, AnimatedVisibility का इस्तेमाल करें. AnimatedVisibility में मौजूद बच्चे, Modifier.animateEnterExit() का इस्तेमाल करके, मीटिंग में शामिल होने या उससे बाहर निकलने के लिए ट्रांज़िशन कर सकते हैं.

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
    // ...
}
AnimationQuickGuide.kt

AnimatedVisibility के एंटर और एक्सिट पैरामीटर की मदद से, यह कॉन्फ़िगर किया जा सकता है कि कंपोज़ेबल दिखने और न दिखने पर कैसा व्यवहार करे. पूरा डेटा पढ़ें दस्तावेज़ में ज़्यादा जानकारी पाएं.

कंपोज़ेबल के दिखने की सेटिंग को ऐनिमेट करने का एक और तरीका है, animateFloatAsState का इस्तेमाल करते समय, ऐल्फ़ा के बारे में जानकारी:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

हालांकि, ऐल्फ़ा को बदलने के साथ ही कंपोज़ेबल में रहने वाली चेतावनी शामिल होती है कंपोज़िशन में शामिल हो गया है और उसके आस-पास की जगह का इस्तेमाल कर रहा है. इस वजह से, स्क्रीन रीडर और सुलभता से जुड़ी अन्य सुविधाएं, स्क्रीन पर मौजूद आइटम को अब भी पढ़ सकती हैं. दूसरी ओर, AnimatedVisibility आखिर में कॉम्पोज़िशन से आइटम को हटा देता है.

दूसरी इमेज. किसी कंपोज़ेबल का ऐल्फ़ा वर्शन ऐनिमेट करना

बैकग्राउंड का रंग ऐनिमेट करना

तीसरी इमेज. कॉम्पोज़ेबल के बैकग्राउंड के रंग को ऐनिमेट करना

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

यह विकल्प, Modifier.background() के मुकाबले ज़्यादा बेहतर परफ़ॉर्म करता है. एक शॉट में रंग की सेटिंग के लिए Modifier.background() स्वीकार्य है, लेकिन जब समय के साथ रंग ऐनिमेट करने की वजह से, शॉर्ट वीडियो को दोबारा बनाने पर ज़रूरी है.

बैकग्राउंड के रंग को अनलिमिटेड ऐनिमेशन देने के लिए, ऐनिमेशन सेक्शन को दोहराना लेख पढ़ें.

किसी कॉम्पोज़ेबल के साइज़ को ऐनिमेट करना

चौथी इमेज. छोटे और बड़े साइज़ के बीच आसानी से ऐनिमेशन करने वाला कॉम्पोज़ेबल

Compose की मदद से, कॉम्पोज़ेबल के साइज़ को अलग-अलग तरीकों से ऐनिमेट किया जा सकता है. कॉम्पोज़ेबल के साइज़ में होने वाले बदलावों के बीच ऐनिमेशन के लिए, animateContentSize() का इस्तेमाल करें.

उदाहरण के लिए, अगर आपके पास कोई ऐसा बॉक्स है जिसमें टेक्स्ट है, जो एक से बड़ा हो सकता है की एक से ज़्यादा लाइनें हैं. आसानी से मैसेज पाने के लिए, Modifier.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
        }

) {
}
AnimationQuickGuide.kt

ध्यान दें: बदलाव करने वाले निर्देशों का क्रम यहां मायने रखता है. इसे किसी भी साइज़ में बदलाव करने वाले टैग के आगे रखना न भूलें.

आप AnimatedContent के साथ SizeTransform का इस्तेमाल करके, यह भी बता सकते हैं कि साइज़ में बदलाव कैसे होने चाहिए.

कंपोज़ेबल की पोज़िशन ऐनिमेट करें

पांचवीं इमेज. ऑफ़सेट के हिसाब से आसानी से मूव किया जा सकता है

किसी कॉम्पोज़ेबल की पोज़िशन को ऐनिमेट करने के लिए, Modifier.offset{ } के साथ animateIntOffsetAsState() का इस्तेमाल करें.

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

चेतावनी: इससे, माता-पिता के मुताबिक कंपोज़ेबल को इस तरह पेश करने में कोई असर नहीं पड़ता: रखा गया है. इसलिए, भाई-बहनों की जगह पर कोई असर नहीं पड़ता. इसका नतीजा यह हो सकता है एक-दूसरे के ऊपर या नीचे ड्रॉइंग करते भाई-बहन. ऑफ़सेट का असर सिर्फ़ Modifier.offset{} के चाइल्ड लेआउट की पोज़िशन पर पड़ता है.

अगर आपको यह पक्का करना है कि कंपोज़ेबल को किसी दूसरे कंपोज़ेबल के ऊपर या नीचे कंपोज़ेबल, पोज़िशन या साइज़ को ऐनिमेट करते समय, Modifier.layout{ } का इस्तेमाल करें. यह मॉडिफ़ायर, पैरंट के साइज़ और पोज़िशन में बदलाव करता है, जो उसके असर पर असर डालता है अन्य बच्चे.

उदाहरण के लिए, अगर आपको Column में मौजूद किसी Box को एक जगह से दूसरी जगह ले जाना है और Box के साथ-साथ अन्य बच्चों को भी एक जगह से दूसरी जगह ले जाना है, तो Modifier.layout{ } के साथ ऑफ़सेट की जानकारी इस तरह शामिल करें:

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

छठी इमेज. Modifier.layout{ }

के साथ ऐनिमेशन बनाना

कंपोज़ेबल की पैडिंग (जगह) ऐनिमेट करें

सातवीं इमेज. पैडिंग के ऐनिमेशन के साथ काम करने वाला कॉम्पोज़ेबल

किसी कंपोज़ेबल की पैडिंग (जगह) को ऐनिमेट करने के लिए, इसके साथ animateDpAsState का इस्तेमाल करें Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

कंपोज़ेबल के एलिवेशन का ऐनिमेशन इस्तेमाल करें

आठवीं इमेज. क्लिक करने पर, Composable के एलिवेशन में ऐनिमेशन

किसी कंपोज़ेबल की ऊंचाई को ऐनिमेट करने के लिए, animateDpAsState को इसके साथ इस्तेमाल करें Modifier.graphicsLayer{ }. एक बार में ऊंचाई में बदलाव करने के लिए, Modifier.shadow() का इस्तेमाल करें. अगर आपको शैडो को ऐनिमेट करना है, तो Modifier.graphicsLayer{ } मॉडिफ़ायर ज़्यादा बेहतर परफ़ॉर्म करने वाला विकल्प है.

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

इसके अलावा, Card कंपोज़ेबल का इस्तेमाल किया जा सकता है. साथ ही, एलिवेशन प्रॉपर्टी को अलग-अलग वैल्यू दी गई हैं.

टेक्स्ट के स्केल, ट्रांसलेशन या रोटेशन को ऐनिमेट करना

नौवीं इमेज. टेक्स्ट, दो साइज़ के बीच आसानी से ऐनिमेट हो रहा है

टेक्स्ट के स्केल, अनुवाद या रोटेशन को ऐनिमेट करते समय, textMotion सेट करें पैरामीटर की वैल्यू TextStyle से TextMotion.Animated तक है. इससे टेक्स्ट ऐनिमेशन के बीच आसानी से ट्रांज़िशन किया जा सकता है. Modifier.graphicsLayer{ } का इस्तेमाल करके टेक्स्ट का अनुवाद करें, उसे घुमाएं या स्केल करें.

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

टेक्स्ट का रंग ऐनिमेट करना

10वीं इमेज. टेक्स्ट के रंग को ऐनिमेट करने का उदाहरण

टेक्स्ट के रंग को ऐनिमेट करने के लिए, BasicText कंपोज़ेबल में color लैम्डा का इस्तेमाल करें:

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

अलग-अलग तरह के कॉन्टेंट के बीच स्विच करना

11वां डायग्राम. अलग-अलग कॉम्पोज़ेबल के बीच बदलावों को ऐनिमेट करने के लिए, AnimatedContent का इस्तेमाल करना (धीमा किया गया)

अलग-अलग कॉम्पोज़ेबल के बीच ऐनिमेशन के लिए, AnimatedContent का इस्तेमाल करें. अगर आपको सिर्फ़ कॉम्पोज़ेबल के बीच स्टैंडर्ड फ़ेड चाहिए, तो Crossfade का इस्तेमाल करें.

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

AnimatedContent को पसंद के मुताबिक बनाया जा सकता है, ताकि इसमें अलग-अलग तरह के एंटर और बाहर निकलने के ट्रांज़िशन दिखाए जा सकें. ज़्यादा जानकारी के लिए, AnimatedContent पर मौजूद दस्तावेज़ पढ़ें या AnimatedContent पर मौजूद यह ब्लॉग पोस्ट पढ़ें.

अलग-अलग डेस्टिनेशन पर नेविगेट करते समय ऐनिमेशन दिखाना

12वीं इमेज. नेविगेशन कंपोज़ेबल का इस्तेमाल करके, कंपोज़ेबल के बीच ऐनिमेट करना

इसका इस्तेमाल करते समय, कंपोज़ेबल के बीच ट्रांज़िशन को ऐनिमेट करने के लिए नेविगेशन-कंपोज़ आर्टफ़ैक्ट में, enterTransition की जानकारी दें और कंपोज़ेबल में exitTransition. सबसे ऊपर के लेवल पर, सभी डेस्टिनेशन के लिए डिफ़ॉल्ट ऐनिमेशन का इस्तेमाल करने के लिए भी सेट किया जा सकता है NavHost:

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

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

ध्यान दें: ट्रांज़िशन में शामिल होने और उससे बाहर निकलने की सुविधा, सिर्फ़ navigation-compose 2.7.0-alpha01 में उपलब्ध है.

ऐनिमेशन दोहराना

13वीं इमेज. बैकग्राउंड का रंग, दो वैल्यू के बीच अनलिमिटेड ऐनिमेशन करता है

अपने ऐनिमेशन को लगातार दोहराने के लिए, infiniteRepeatable animationSpec के साथ rememberInfiniteTransition का इस्तेमाल करें. RepeatModes को इसमें बदलें तय करें कि इसे किस तरह आगे-पीछे किया जाना चाहिए.

तय संख्या में दोहराने के लिए, finiteRepeatable का इस्तेमाल करें.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

किसी कॉम्पोज़ेबल के लॉन्च होने पर ऐनिमेशन शुरू करना

जब कोई कंपोज़ेबल कंपोज़ेबल में शामिल होता है, तब LaunchedEffect चलता है. शुरू हो जाएगा किसी कंपोज़ेबल के लॉन्च होने पर ऐनिमेशन का इस्तेमाल किया जा सकता है, तो इसका इस्तेमाल ऐनिमेशन को चलाने के लिए राज्य में बदलाव. शुरू करने के लिए, animateTo तरीके के साथ Animatable का इस्तेमाल किया जा रहा है लॉन्च पर ऐनिमेशन:

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

चेतावनी: लेज़ी लेआउट में LaunchedEffects का इस्तेमाल करते समय सावधानी बरतें. वे आइटम के कंपोज़िशन में फिर से आने पर उसे फिर से लॉन्च करें. उदाहरण के लिए, ऐसा तब हो सकता है, जब सूची को स्क्रीन से बाहर और फिर से स्क्रीन पर स्क्रोल किया जाए. इसके बजाय, अपनी स्थिति को लेज़ी लेआउट के बाहर होस्ट करें, ताकि यह पक्का किया जा सके कि कॉम्पोज़िशन में हर स्क्रोल इन और आउट के लिए ऐनिमेशन न हो.

क्रम से चलने वाले ऐनिमेशन बनाना

14वीं इमेज. डायग्राम में दिखाया गया है कि क्रम में चलने वाला ऐनिमेशन एक-एक करके कैसे आगे बढ़ता है.

क्रम से या एक साथ कई ऐनिमेशन चलाने के लिए, Animatable कोरुटाइन एपीआई का इस्तेमाल करें. किसी दूसरी वजह से, Animatable पर animateTo को कॉल करना प्रत्येक एनिमेशन को आगे बढ़ने से पहले पिछले एनिमेशन के पूरा होने की प्रतीक्षा करनी होगी . ऐसा इसलिए है, क्योंकि यह एक निलंबित करने वाला फ़ंक्शन है.

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

एक साथ ऐनिमेशन बनाएं

15वीं इमेज. डायग्राम में दिखाया गया है कि एक साथ चलने वाले ऐनिमेशन एक ही समय पर कैसे आगे बढ़ते हैं.

एक साथ कई ऐनिमेशन चलाने के लिए, कोरुटाइन एपीआई (Animatable#animateTo() या animate) या Transition एपीआई का इस्तेमाल करें. अगर कोरुटाइन कॉन्टेक्स्ट में कई लॉन्च फ़ंक्शन का इस्तेमाल किया जाता है, तो यह एक ही समय पर ऐनिमेशन लॉन्च करता है:

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

ड्राइव करने के लिए एक ही राज्य का इस्तेमाल करने के लिए, updateTransition एपीआई का इस्तेमाल किया जा सकता है एक ही समय पर कई अलग-अलग प्रॉपर्टी ऐनिमेशन इस्तेमाल कर सकते हैं. नीचे दिए गए उदाहरण में, rect और borderWidth की स्थिति में हुए बदलाव से कंट्रोल की जाने वाली दो प्रॉपर्टी को ऐनिमेट किया गया है:

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

ऐनिमेशन की परफ़ॉर्मेंस ऑप्टिमाइज़ करें

Compose में ऐनिमेशन की वजह से, परफ़ॉर्मेंस से जुड़ी समस्याएं आ सकती हैं. ऐसा कुदरत की वजह से होता है ऐनिमेशन क्या होता है: स्क्रीन पर पिक्सल को तेज़ी से मूव करना या बदलना, का इस्तेमाल करें.

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

यह पक्का करने के लिए कि ऐनिमेशन के दौरान, ऐप्लिकेशन कम से कम काम करे, lambda को चुनें Modifier का वर्शन हूबहू शामिल करें. यह फिर से कॉम्पोज़ करने की प्रोसेस को छोड़ देता है और ऐनिमेशन को कॉम्पोज़ करने के चरण के बाहर चलाता है. इसके अलावा, Modifier.graphicsLayer{ } का इस्तेमाल करें, क्योंकि यह मॉडिफ़ायर हमेशा ड्रॉ करने के चरण में चलता है. इस बारे में ज़्यादा जानकारी के लिए, इसमें डिफ़रिंग रीड सेक्शन देखें परफ़ॉर्मेंस दस्तावेज़.

ऐनिमेशन का समय बदलना

डिफ़ॉल्ट रूप से, लिखने के लिए ज़्यादातर ऐनिमेशन के लिए वसंत के ऐनिमेशन का इस्तेमाल किया जाता है. स्प्रिंग या फिज़िक्स पर आधारित ऐनिमेशन ज़्यादा नैचुरल लगते हैं. ये रुकावटें भी आ सकती हैं, क्योंकि वे किसी तय समय के बजाय, ऑब्जेक्ट के मौजूदा वेलोसिटी (वेग) को ध्यान में रखते हैं. अगर आपको डिफ़ॉल्ट सेटिंग बदलनी है, तो ऊपर दिखाए गए सभी ऐनिमेशन एपीआई में, animationSpec सेट करने की सुविधा होती है. इससे, ऐनिमेशन के चलने के तरीके को पसंद के मुताबिक बनाया जा सकता है. जैसे, यह तय किया जा सकता है कि ऐनिमेशन को किसी खास अवधि के लिए चलाया जाए या उसे ज़्यादा बाउंसी बनाया जाए.

animationSpec के अलग-अलग विकल्पों की खास जानकारी यहां दी गई है:

• spring: फ़िज़िक्स पर आधारित ऐनिमेशन, जो सभी ऐनिमेशन के लिए डिफ़ॉल्ट तौर पर लागू होता है. आपने लोगों तक पहुंचाया मुफ़्त में की वजह से कठोरता या डंपिंगRatio को बदला जा सकता है, ताकि कोई अलग ऐनिमेशन बनाया जा सके रंग-रूप.
• tween (इनके बीच का छोटा रूप:): अवधि के हिसाब से ऐनिमेशन, ऐनिमेशन दो वैल्यू के बीच में, Easing फ़ंक्शन को चालू करें.
• keyframes: खास जानकारी के लिए, यूआरएल के कुछ मुख्य बिंदुओं पर वैल्यू ऐनिमेशन.
• repeatable: अवधि के आधार पर तय किया गया खास निर्देश, जो तय समय पर तय होता है, RepeatMode के ज़रिए तय किया गया.
• infiniteRepeatable: अवधि पर आधारित स्पेसिफ़िकेशन, जो हमेशा चलता रहता है.
• snap: यह बिना किसी ऐनिमेशन के तुरंत एंड वैल्यू पर ले जाता है.

16 इमेज. कोई स्पेसिफ़िकेशन सेट नहीं है बनाम कस्टम स्प्रिंग स्पेसिफ़िकेशन सेट नहीं है

animationSpecs के बारे में ज़्यादा जानकारी के लिए, पूरा दस्तावेज़ पढ़ें.

अन्य संसाधन

Compose में मज़ेदार ऐनिमेशन के ज़्यादा उदाहरण देखने के लिए, इन पर एक नज़र डालें:

• Compose में 5 क्विक ऐनिमेशन
• Compose में जेलीफ़िश को हिलाने की सुविधा
• लिखने के लिए इस्तेमाल होने वाले टूल में AnimatedContent को पसंद के मुताबिक बनाना
• Compose में ईज़िंग फ़ंक्शन इस्तेमाल करना