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

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

  • AnimatedVectorDrawable 파일 형식
  • ImageVector 이 Medium 도움말에서와 같이 Compose 애니메이션 API가 포함된
  • 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

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

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