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

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

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

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

টেক্সট

fontSize-এ হওয়া পরিবর্তন অ্যানিমেট করতে, resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds()-এর সাথে Modifier.sharedBounds() ব্যবহার করুন। এই ট্রানজিশন সাইজ পরিবর্তনকে তুলনামূলকভাবে ফ্লুইড করে তোলে। 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()
        )
)

TextAlign পরিবর্তন ডিফল্ট হিসেবে অ্যানিমেট করা হয় না। পরিবর্তে, শেয়ার করা ট্রানজিশনের জন্য বিভিন্ন TextAlign ব্যবহার করার পরিবর্তে Modifier.wrapContentSize() বা Modifier.wrapContentWidth() ব্যবহার করুন।