Häufige Anwendungsfälle für gemeinsame Elemente

Bei der Animation freigegebener Elemente gibt es einige spezielle Anwendungsfälle, für die bestimmte Empfehlungen gelten.

Asynchrone Bilder

Häufig wird eine Bibliothek verwendet, um ein Bild asynchron zu laden, z. B. bei der Verwendung der zusammensetzbaren Funktion CoilAsyncImage. Damit die Funktion nahtlos zwischen zwei zusammensetzbaren Funktionen funktioniert, sollten Sie placeholderMemoryCacheKey() und memoryCacheKey() auf denselben Schlüssel als String festlegen, der vom Schlüssel des freigegebenen Elements abgeleitet wird. So ist der Cache-Schlüssel für die übereinstimmenden freigegebenen Elemente identisch. Das neue freigegebene Element verwendet den Cache des übereinstimmenden Elements als Platzhalter, bis das neue Bild geladen ist.

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

Verwenden Sie Modifier.sharedBounds() und resizeMode = ScaleToBounds(), um Änderungen an fontSize zu animieren. Durch diese Übergänge ändert sich die Größe relativ flüssig. Mit dem Parameter contentScale können Sie ein bestimmtes Schriftgewicht oder einen bestimmten 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

Änderungen an TextAlign werden standardmäßig nicht animiert. Verwenden Sie stattdessen Modifier.wrapContentSize() oder Modifier.wrapContentWidth(), anstatt für freigegebene Übergänge unterschiedliche TextAlign zu verwenden.