موارد استفاده رایج از عنصر مشترک

When animating shared elements, there are some particular use cases that have specific recommendations.

تصاویر ناهمگام

استفاده از کتابخانه برای بار کردن ناهمگام تصویر رایج است، مثلاً هنگام استفاده از ترکیب‌پذیر AsyncImageCoil. برای اینکه این ویژگی به‌طور یکپارچه بین دو ترکیب‌پذیر کار کند، توصیه می‌شود 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 به‌طور پیش‌فرض پویانمایی نمی‌شوند. درعوض، از Modifier.wrapContentSize() یا Modifier.wrapContentWidth() به‌جای TextAlign متفاوت برای انتقال‌های مشترک استفاده کنید.