शेयर किए गए एलिमेंट के इस्तेमाल के सामान्य उदाहरण

शेयर किए गए एलिमेंट में ऐनिमेशन जोड़ने के कुछ खास इस्तेमाल के उदाहरण हैं. इनके लिए, खास सुझाव दिए गए हैं.

एसिंक्रोनस इमेज

किसी इमेज को एसिंक्रोनस तरीके से लोड करने के लिए, लाइब्रेरी का इस्तेमाल करना आम बात है. जैसे, 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
        )
)
SharedElementCommonUseCaseSnippets.kt

टेक्स्ट

बदलावों में ऐनिमेशन जोड़ने के लिए, Modifier.sharedBounds(), resizeMode = ScaleToBounds() का इस्तेमाल करें.fontSize इस ट्रांज़िशन से, साइज़ में होने वाला बदलाव ज़्यादा फ़्लूड दिखता है. किसी खास फ़ॉन्ट वेट या स्टाइल में ऐनिमेशन जोड़ने के लिए, 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()
        )
)
SharedElementCommonUseCaseSnippets.kt

डिफ़ॉल्ट रूप से, TextAlign में होने वाले बदलावों में ऐनिमेशन नहीं जोड़ा जाता. इसके बजाय, शेयर किए गए ट्रांज़िशन के लिए अलग-अलग TextAlign का इस्तेमाल करने के बजाय, Modifier.wrapContentSize() या Modifier.wrapContentWidth() का इस्तेमाल करें.