शेयर किए गए एलिमेंट के इस्तेमाल के सामान्य उदाहरण
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
शेयर किए गए एलिमेंट में ऐनिमेशन जोड़ते समय, इस्तेमाल के कुछ ऐसे उदाहरण होते हैं जिनके लिए खास सुझाव दिए गए हैं.
एसिंक्रोनस इमेज
आम तौर पर, इमेज को एसिंक्रोनस तरीके से लोड करने के लिए किसी लाइब्रेरी का इस्तेमाल किया जाता है. जैसे, Coil के AsyncImage कंपोज़ेबल का इस्तेमाल करते समय.
दो कंपोज़ेबल के बीच इसे आसानी से काम करने के लिए, हमारा सुझाव है कि placeholderMemoryCacheKey() और memoryCacheKey() को एक ही कुंजी पर सेट करें. यह कुंजी, शेयर किए गए एलिमेंट की कुंजी से ली गई स्ट्रिंग के तौर पर होनी चाहिए, ताकि मैच किए गए शेयर किए गए एलिमेंट के लिए कैश मेमोरी की कुंजी एक जैसी हो. शेयर किया गया नया एलिमेंट, नई इमेज लोड होने तक प्लेसहोल्डर के तौर पर, मैच की गई इमेज की कैश मेमोरी का इस्तेमाल करेगा.
AsyncImage का इस्तेमाल आम तौर पर इस तरह किया जाता है:
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("your-image-url")
.crossfade(true)
.placeholderMemoryCacheKey("image-key") // same key as shared element key
.memoryCacheKey("image-key") // same key as shared element key
.build(),
placeholder = null,
contentDescription = null,
modifier = Modifier
.size(120.dp)
.sharedBounds(
rememberSharedContentState(
key = "image-key"
),
animatedVisibilityScope = this
)
)
टेक्स्ट
fontSize में हुए बदलावों को ऐनिमेट करने के लिए, Modifier.sharedBounds(), resizeMode =
ScaleToBounds() का इस्तेमाल करें. इस ट्रांज़िशन से, साइज़ में बदलाव आसानी से होता है. contentScale पैरामीटर में बदलाव करके, किसी खास फ़ॉन्ट के वेट या स्टाइल को ऐनिमेट किया जा सकता है.
Text(
text = "This is an example of how to share text",
modifier = Modifier
.wrapContentWidth()
.sharedBounds(
rememberSharedContentState(
key = "shared Text"
),
animatedVisibilityScope = this,
enter = fadeIn(),
exit = fadeOut(),
resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
)
)
TextAlign बदलावों में डिफ़ॉल्ट रूप से ऐनिमेशन नहीं होता है. इसके बजाय, शेयर किए गए ट्रांज़िशन के लिए अलग-अलग TextAlign इस्तेमाल करने के बजाय, Modifier.wrapContentSize() या Modifier.wrapContentWidth() का इस्तेमाल करें.
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-08-23 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-08-23 (UTC) को अपडेट किया गया."],[],[],null,["# Common shared element use cases\n\nWhen animating shared elements, there are some particular use cases that have\nspecific recommendations.\n\nAsynchronous images\n-------------------\n\nIt's common to use a library to load up an image asynchronously, such as when\nusing [Coil's `AsyncImage` composable](https://coil-kt.github.io/coil/compose/).\nFor it to work seamlessly between two composables, its recommended to set the\n`placeholderMemoryCacheKey()` and `memoryCacheKey()` to the same key as a string\nderived from the shared element key, such that the cache key is the same for the\nmatched shared elements. The new shared element will be using its match's cache\nas the placeholder until it loads the new image.\n\nThe typical usage for `AsyncImage` is as follows:\n\n\n```kotlin\nAsyncImage(\n model = ImageRequest.Builder(LocalContext.current)\n .data(\"your-image-url\")\n .crossfade(true)\n .placeholderMemoryCacheKey(\"image-key\") // same key as shared element key\n .memoryCacheKey(\"image-key\") // same key as shared element key\n .build(),\n placeholder = null,\n contentDescription = null,\n modifier = Modifier\n .size(120.dp)\n .sharedBounds(\n rememberSharedContentState(\n key = \"image-key\"\n ),\n animatedVisibilityScope = this\n )\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L47-L64\n```\n\n\u003cbr /\u003e\n\nText\n----\n\nTo animate `fontSize` changes, use `Modifier.sharedBounds()`, `resizeMode =\nScaleToBounds()`. This transition makes the size\nchange relatively fluid. The `contentScale` parameter can be tweaked to animate\na specific font weight or style.\n\n\n```kotlin\nText(\n text = \"This is an example of how to share text\",\n modifier = Modifier\n .wrapContentWidth()\n .sharedBounds(\n rememberSharedContentState(\n key = \"shared Text\"\n ),\n animatedVisibilityScope = this,\n enter = fadeIn(),\n exit = fadeOut(),\n resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()\n )\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L84-L97\n```\n\n\u003cbr /\u003e\n\n`TextAlign` changes are **not** animated by default. Instead, use\n`Modifier.wrapContentSize()` or `Modifier.wrapContentWidth()` over using different\n`TextAlign` for shared transitions."]]
