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

Paylaşılan öğelere animasyon uygularken, öneriler alabilirsiniz.

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

Bir resmi eşzamansız olarak yüklemek için kitaplık kullanmak yaygın bir uygulamadır. Örneğin: Coil'in AsyncImage composable'ını kullanarak. İki composable arasında sorunsuz şekilde çalışması için placeholderMemoryCacheKey() ve memoryCacheKey() değerlerini bir dizeyle aynı anahtara ekleyin aynı olacak şekilde, paylaşılan öğe anahtarından türetilir ve eşleşen paylaşılan öğeler. Yeni paylaşılan öğe, eşleşmenin önbelleğini kullanır olarak 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şikliklerine animasyon eklemek için Modifier.sharedBounds(), resizeMode = ScaleToBounds() işlevini kullanın. Bu geçiş, boyutu göreceli olarak esnek bir değişiklik yapabilirsiniz. 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 canlandırmalı değildir. Bunun yerine Modifier.wrapContentSize() / Modifier.wrapContentWidth() fazla kullanılıyor Paylaşılan geçişler için TextAlign.