Paylaşılan öğelerin yaygın kullanım alanları

Paylaşılan öğelere animasyon eklerken belirli önerilerin bulunduğu bazı kullanım alanları vardır.

Eşzamansız resimler

Örneğin Coil'in AsyncImage composable'ını kullanırken olduğu gibi, resimleri eşzamansız olarak yüklemek için kitaplık kullanılması yaygındır. İki composable arasında sorunsuz bir şekilde çalışması için placeholderMemoryCacheKey() ve memoryCacheKey() öğelerinin, paylaşılan öğe anahtarından türetilen bir dizeyle aynı anahtara ayarlanması önerilir. Böylece, eşleşen paylaşılan öğeler için önbellek anahtarı aynı olur. Yeni paylaşılan öğe, yeni resmi yükleyene kadar eşleşmenin önbelleğini yer tutucu olarak kullanır.

AsyncImage öğesinin tipik kullanımı aşağıdaki gibidir:

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

Text

fontSize değişikliklerine animasyon eklemek için Modifier.sharedBounds(), resizeMode = ScaleToBounds() işlevini kullanın. Bu geçiş, boyut değişikliğini nispeten daha esnek hale getirir. contentScale parametresi, belirli bir yazı tipi ağırlığına veya stiline animasyon eklemek için değiştirilebilir.

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 değişikliklerine varsayılan olarak animasyon uygulanmaz. Bunun yerine, paylaşılan geçişler için farklı TextAlign yerine Modifier.wrapContentSize() / Modifier.wrapContentWidth() kullanın.