일반적인 공유 요소의 사용 사례

공유 요소에 애니메이션을 적용할 때 구체적인 권장사항이 있는 몇 가지 특정 사용 사례가 있습니다.

비동기 이미지

Coil의 AsyncImage 컴포저블을 사용할 때와 같이 라이브러리를 사용하여 이미지를 비동기식으로 로드하는 것이 일반적입니다. 두 컴포저블 간에 원활하게 작동하려면 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()를 사용하세요.