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

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

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

অ্যাসিঙ্ক্রোনাসভাবে একটি ছবি লোড করার জন্য লাইব্রেরি ব্যবহার করা একটি সাধারণ বিষয়, যেমন 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() ব্যবহার করুন।