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

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

Eşzamansız görüntüler

Bir resmi eşzamansız olarak yüklemek için kitaplık kullanmak yaygındır (ör. Coil'in AsyncImage bileşeni kullanılırken). İ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, önbellek anahtarı, eşleşen paylaşılan öğeler için aynı olur. Yeni paylaşılan öğe, yeni resmi yükleyene kadar yer tutucu olarak eşleşmesinin önbelleğini kullanır.

AsyncImage için 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

Metin

fontSize değişikliklerini animasyonlu olarak göstermek için Modifier.sharedBounds(), resizeMode = ScaleToBounds() öğelerini kullanın. Bu geçiş, boyutun görece akıcı bir şekilde değişmesini sağlar. contentScale parametresi, belirli bir yazı tipi kalınlığını veya stilini animasyonlu hale getirmek için ayarlanabilir.

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