Häufige Anwendungsfälle für gemeinsame Elemente

Beim Animieren gemeinsamer Elemente gibt es einige spezielle Anwendungsfälle, für die bestimmte Empfehlungen gelten.

Asynchrone Bilder

Es ist üblich, eine Bibliothek zu verwenden, um ein Bild asynchron zu laden, z. B. wenn Sie die Coil-Composable AsyncImage verwenden. Damit die Übergänge zwischen zwei Composables reibungslos funktionieren, empfiehlt es sich, placeholderMemoryCacheKey() und memoryCacheKey() auf denselben Schlüssel als String festzulegen, der vom Schlüssel des gemeinsamen Elements abgeleitet wird. So ist der Cacheschlüssel für die übereinstimmenden gemeinsamen Elemente derselbe. Das neue freigegebene Element verwendet den Cache des entsprechenden Elements als Platzhalter, bis das neue Bild geladen wird.

AsyncImage wird in der Regel so verwendet:

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

Um fontSize-Änderungen zu animieren, verwenden Sie Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Durch diesen Übergang ändert sich die Größe relativ fließend. Mit dem Parameter contentScale lässt sich ein bestimmtes Schriftgewicht oder ein bestimmter Schriftstil animieren.

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-Änderungen werden standardmäßig nicht animiert. Verwenden Sie stattdessen Modifier.wrapContentSize() oder Modifier.wrapContentWidth() anstelle von verschiedenen TextAlign für gemeinsame Übergänge.