সাধারণ ভাগ করা উপাদান ব্যবহারের ক্ষেত্রে

শেয়ার করা উপাদানগুলিকে অ্যানিমেট করার সময়, কিছু নির্দিষ্ট ব্যবহারের ক্ষেত্রে নির্দিষ্ট সুপারিশ থাকে।

অ্যাসিঙ্ক্রোনাস ছবি

Coil এর AsyncImage composable ব্যবহার করার সময়, একটি ছবি অ্যাসিঙ্ক্রোনাসভাবে লোড করার জন্য একটি লাইব্রেরি ব্যবহার করা সাধারণ। দুটি কম্পোজেবলের মধ্যে এটি নির্বিঘ্নে কাজ করার জন্য, 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 পরিবর্তনগুলি ডিফল্টরূপে অ্যানিমেটেড হয় না । পরিবর্তে, শেয়ার করা ট্রানজিশনের জন্য বিভিন্ন TextAlign ব্যবহার করে Modifier.wrapContentSize() অথবা Modifier.wrapContentWidth() ব্যবহার করুন।