Häufige Anwendungsfälle für gemeinsame Elemente

Beim Animieren von freigegebenen Elementen gibt es einige spezielle Anwendungsfälle, für die es bestimmte Empfehlungen gibt.

Asynchrone Bilder

Es ist üblich, eine Bibliothek zu verwenden, um ein Bild asynchron zu laden, z. B. mit dem Compose-Element AsyncImage von Coil. Damit das nahtlos zwischen zwei Composables funktioniert, wird empfohlen, placeholderMemoryCacheKey() und memoryCacheKey() auf denselben Schlüssel festzulegen, der als String 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 wird.

AsyncImage wird normalerweise 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

Verwenden Sie Modifier.sharedBounds(), resizeMode = ScaleToBounds(), um fontSize-Änderungen zu animieren. 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() oder Modifier.wrapContentWidth(), anstatt verschiedene TextAlign für gemeinsame Übergänge zu verwenden.