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

공유 요소를 애니메이션으로 처리할 때 특정 권장사항이 있는 몇 가지 특정 사용 사례가 있습니다.

비동기 이미지

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

이전
맞춤설정
다음
내비게이션 지원