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

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

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

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

टेक्स्ट

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()
        )
)
SharedElementCommonUseCaseSnippets.kt

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