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

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

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

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

ऐनिमेट किया गया / गायब होने वाला ऐनिमेशन

किसी कंपोज़ेबल को छिपाने या दिखाने के लिए, 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.layout{ } का इस्तेमाल करें. यह मॉडिफ़ायर, पैरंट के साइज़ और पोज़िशन में बदलाव करता है, जो उसके असर पर असर डालता है अन्य बच्चे.

उदाहरण के लिए, अगर आप Box को Column और दूसरे बच्चों में ले जा रहे हैं 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

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

किसी कंपोज़ेबल की पैडिंग (जगह) को ऐनिमेट करने के लिए, इसके साथ 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

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

किसी कंपोज़ेबल की ऊंचाई को ऐनिमेट करने के लिए, 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

लेख रंग ऐनिमेट करें

टेक्स्ट के रंग को ऐनिमेट करने के लिए, 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

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

अलग-अलग कंपोज़ेबल में ऐनिमेट करने के लिए 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.

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

इसका इस्तेमाल करते समय, कंपोज़ेबल के बीच ट्रांज़िशन को ऐनिमेट करने के लिए नेविगेशन-कंपोज़ आर्टफ़ैक्ट में, 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

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

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

infiniteRepeatable के साथ rememberInfiniteTransition का इस्तेमाल करें अपने ऐनिमेशन को लगातार दोहराने के लिए animationSpec. 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

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

एक साथ क्रम में या एक साथ काम करने के लिए, 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

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

कोरूटीन एपीआई (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: यह बिना किसी ऐनिमेशन के तुरंत एंड वैल्यू पर ले जाता है.

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

अन्य संसाधन

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

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