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

Paylaşılan öğelere animasyon eklerken belirli öneriler içeren bazı kullanım alanları vardır.

Eşzamansız resimler

Coil'in AsyncImage composable'ını kullanırken olduğu gibi, bir resmi eşzamansız olarak yüklemek için kitaplık kullanmak yaygındır. İki composable arasında sorunsuz çalışması için placeholderMemoryCacheKey() ve memoryCacheKey() değerlerini, paylaşılan öğe anahtarından türetilen bir dize olarak aynı anahtara ayarlamanız ö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 şu şekildedir:

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 canlandırmak için Modifier.sharedBounds(), resizeMode = ScaleToBounds() tuşlarını kullanın. Bu geçiş, boyut değişikliğini nispeten akıcı hale getirir. contentScale parametresi, belirli bir yazı tipi kalınlığını veya stilini canlandırmak 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 kullanmak yerine Modifier.wrapContentSize() veya Modifier.wrapContentWidth() kullanın.