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

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

비동기 이미지

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()을 사용하세요.