Häufige Anwendungsfälle für gemeinsame Elemente

Für die Animation von gemeinsam verwendeten 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 Composable AsyncImage von Coil. Damit das nahtlos zwischen zwei Composables funktioniert, wird empfohlen, für placeholderMemoryCacheKey() und memoryCacheKey() denselben Schlüssel festzulegen, der von dem Schlüssel des freigegebenen Elements abgeleitet ist. 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.

Die typische Verwendung für 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 Änderungen an fontSize animieren möchten, verwenden Sie Modifier.sharedBounds(), 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() oder Modifier.wrapContentWidth(), anstatt verschiedene TextAlign für gemeinsame Übergänge zu verwenden.