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 AsyncImage-Composable-Funktion von Coil verwenden. Damit die Übergänge zwischen zwei Composables nahtlos funktionieren, empfiehlt es sich, placeholderMemoryCacheKey() und memoryCacheKey() auf denselben Schlüssel als String festzulegen, der vom Schlüssel des gemeinsamen Elements abgeleitet ist. So ist der Cacheschlüssel für die übereinstimmenden gemeinsamen Elemente derselbe. Das neue gemeinsame Element verwendet den Cache des entsprechenden Elements als Platzhalter, bis das neue Bild geladen wird.

Die typische Verwendung von AsyncImage sieht so aus:

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.