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

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

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

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