共有要素の一般的なユースケース

共有要素をアニメーション化する場合、特定の推奨事項があるユースケースがいくつかあります。

非同期画像

Coil の AsyncImage コンポーザブルを使用する場合など、ライブラリを使用して画像を非同期で読み込むのは一般的です。2 つのコンポーザブル間でシームレスに動作させるには、placeholderMemoryCacheKey() と memoryCacheKey() を、共有要素キーから派生した文字列と同じキーに設定して、一致する共有要素のキャッシュキーが同じになるようにすることをおすすめします。新しい共有要素は、新しい画像を読み込むまで、一致する要素のキャッシュをプレースホルダとして使用します。

AsyncImage の一般的な使用方法は次のとおりです。

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

テキスト

fontSize の変更をアニメーション化するには、Modifier.sharedBounds()、resizeMode = ScaleToBounds() を使用します。このトランジションにより、サイズ変更が比較的スムーズになります。contentScale パラメータを調整して、特定のフォントの太さやスタイルをアニメーション化できます。

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 の変更は、デフォルトではアニメーション化されません。代わりに、共有トランジションに異なる TextAlign を使用するのではなく、Modifier.wrapContentSize() または Modifier.wrapContentWidth() を使用します。