Jetpack Compose Animation – 반복 애니메이션

현재 온도 옆에 있는 새로 고침 아이콘 버튼을 클릭해 보자. 앱이 최신 날씨 정보를 로드를 시작(하는 척) 한다. 로딩이 완료될 때까지 회색 원과 막대인 로딩 인디케이터가 나타난다. 이 인디케이터 알파 값(투명도) 애니메이션을 적용하여 프로세스가 진행 중임을 더 명확하게 표시해 보자.

LoadingRow 컴포저블에서 TODO 5를 찾자.

val alpha = 1f

이 값을 0f와 1f 사이에서 반복적으로 움직이게 만들고 싶다. 이를 위해 InfiniteTransition을 사용할 수 있다. 이 API는 이전 섹션의 Transition API와 유사하다. 둘 다 여러 값에 애니메이션을 적용하지만, Transition은 상태 변경에 따라 값에 애니메이션을 적용하는 반면, InfiniteTransition은 값에 무기한 애니메이션을 적용한다.

InfiniteTransition을 생성하려면 RememberInfiniteTransition 함수를 사용하자. 그런 다음 각 애니메이션 값 변경은 InfiniteTransition의 animate* 확장 함수 중 하나로 선언될 수 있다. 이 경우 알파 값에 애니메이션을 적용하므로 animationFloat를 사용해보겠다. initialValue 매개변수는 0f여야 하고, targetValue는 1f이여야 한다. 이 애니메이션에 AnimationSpec을 지정할 수도 있지만, 이 API는 InfiniteRepeatableSpec만 사용한다. 이를 하나 생성하기 위해 InfinityRepeatable 함수를 사용한다. 이 AnimationSpec은 시간(duration) 기반으로 AnimationSpec을 래핑하고 반복 가능하게 만든다. 예를 들어 결과 코드는 다음과 같아야 한다.

val infiniteTransition = rememberInfiniteTransition()
val alpha by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = keyframes {
            durationMillis = 1000
            0.7f at 500
        },
        repeatMode = RepeatMode.Reverse
    )
)

앱을 실행하고 새로 고침 버튼을 클릭해 보자. 이제 로딩 인디케이터가 움직이는 것을 볼 수 있다.

후원하기