Compose의 애니메이션 벡터 이미지

Compose에서 벡터에 애니메이션을 적용하는 방법에는 여러 가지가 있습니다. 다음 중 하나를 사용할 수 있습니다.

  • AnimatedVectorDrawable 파일 형식
  • Compose Animation API가 포함된 ImageVector(이 Medium 도움말 참조)
  • 서드 파티 솔루션(예: Lottie)

애니메이션 벡터 드로어블 (실험용)

콘텐츠에 애니메이션을 적용하고 회전하는 모래시계
그림 1. Compose의 애니메이션 벡터 드로어블
를 통해 개인정보처리방침을 정의할 수 있습니다.

AnimatedVectorDrawable 리소스를 사용하려면 animatedVectorResource를 사용하여 드로어블 파일을 로드하고 boolean를 전달하여 드로어블의 시작 상태와 종료 상태 간에 전환하고 애니메이션을 실행합니다.

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}
AnimationSnippets.kt

드로어블 파일의 형식에 관한 자세한 내용은 드로어블 그래픽 애니메이션화를 참고하세요.

이전
가치 기반 애니메이션
다음
애니메이션 맞춤설정