Häufige Anwendungsfälle für gemeinsame Elemente

Für die Animation gemeinsam genutzter Elemente gibt es einige spezielle Anwendungsfälle, für die es spezielle Empfehlungen gibt.

Asynchrone Bilder

Es ist üblich, eine Bibliothek zu verwenden, um ein Bild asynchron zu laden, z. B. bei der Verwendung von Coil's AsyncImage composable. Damit die Funktion zwischen zwei Composeables nahtlos funktioniert, wird empfohlen, placeholderMemoryCacheKey() und memoryCacheKey() auf denselben Schlüssel als String festzulegen, der aus dem Schlüssel des freigegebenen Elements abgeleitet wird, sodass der Cache-Schlüssel für die übereinstimmenden freigegebenen Elemente identisch ist. Das neue freigegebene Element verwendet den Cache des Matches 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

Wenn Sie fontSize-Änderungen animieren möchten, verwenden Sie Modifier.sharedBounds() und resizeMode = ScaleToBounds(). Durch diesen Übergang wird die Größenänderung relativ flüssig. Der Parameter contentScale kann angepasst werden, um eine bestimmte Schriftstärke oder einen bestimmten Schriftstil zu 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() / Modifier.wrapContentWidth() für freigegebene Übergänge.TextAlign