শেয়ার করা এলিমেন্টের সাধারণ ব্যবহারিক প্রয়োগ

শেয়ার করা এলিমেন্ট অ্যানিমেট করার সময়, কিছু নির্দিষ্ট ব্যবহারের ক্ষেত্রে নির্দিষ্ট সাজেশন আছে।

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

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