Animation

• 더 나은 사용자 경험을 제공하기 위해서 애니메이션을 적용할 수 있다.
• 컴포즈에서 애니메이션을 적용할 수 있는 API들을 정리할 것이다.

AnimatedXX

AnimatedVisibility, AnimatedContent 등 이미 애니메이션이 포함되어 있는 컴포저블이다. 여기에 가면 예시 동작을 볼 수 있다.

AnimatedVisibility

• visible 값에 따라 나타나고 사라지는 애니메이션 적용 가능
• 화면 상에 크기와 배치는 되어있는데 그리지 않은 게 아니라 실제로 화면에서 사라지는 것
  • 리스트라면 사라지면서 다음 값이 땡겨짐

AnimatedContent

• 콘텐츠가 변결될 때 어떻게 변화할 것인지 애니메이션 적용 가능

Crossfade

• 콘텐츠가 변경될 때 크로스페이지 효과로 전환됨

animteContentSize
Modifier 속성 중 하나로 컴포저블의 크기가 변경될 때 애니메이션 적용

Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
)

AnimatedVectorDrawable

• 벡터 이미지를 boolean를 통해 두 리소스 간의 전환을 반복하는 컴포저블

animateXXAsSate

• 단일 값에 애니메이션 적용

val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)

• 현재 값에서 다른 값으로 변경될 때 애니메이션이 적용이 된다.
• 즉, a -> b가 반복되는 애니메이션을 만들려고 할 때 a->b가 적용되고 다시 a->b를 시작할 때 b->a로 다시 돌아가는 애니메이션이 적용된다!
• 그래서 toggle처럼 두 값이 왔다갔다 하는 애니메이션에는 좋지만 특정 방향으로의 애니메이션이나 초기값이 나중에 정해지는 경우에는 좋지 않다.
  • why? a->b 를 다시 반복하기 위해 b->a로 돌아가는 모션이 보이거나 임시 초기값에서 실제 초기값으로 이동하는 과정이 보이기 때문

Transition

• 여러 애니메이션을 동시에 적용

val transition = updateTransition(currentState, label = "box state")

val rect by transition.animateRect(label = "rectangle") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "border width") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}

• 다음과 같이 Transition 객체를 만든 후 animateXX 함수를 사용하여 하위 애니메이션들을 설정할 수 있다.

rememberInfiniteTransition

• 애니메이션을 무한히 반복하는 API

val infiniteTransition = rememberInfiniteTransition()
val color by infiniteTransition.animateColor(
    initialValue = Color.Red,
    targetValue = Color.Green,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)

rememberInfiniteTransition()을 선언하고 infiniteRepeatable을 사용해서 반복한다.

Animatable

• 코루틴 기반으로 동작하는 단일 값 애니메이션
• animateTo를 이용해 값을 변경하며 이는 코루틴 안에서 호출되어야 한다.
• animateTo를 연속해서 호출하면 순차적으로 애니메이션이 실행된다.
• animatedXXAsState와 달리 시작 값을 설정해줄 수 있다.

AnimationSpec

여기에 실제로 각 값들이 어떻게 동작하는 지 잘 나와있다.

tween

• 특정 시간 동안의 애니메이션 처리
• 지속 시간과 easing, delayMillis를 통해 시작 지연을 설정해줄 수 있다.

spring

• 물리학 기반 애니메이션
• dampingRatio와 stiffness를 통해 애니메이션 설정

keyframes

• 스냅샷처럼 특정 타이밍의 애니메이션 설정 가능

repeatable

• iteration을 설정해줄 수 있는 repeatable 함수와 무한히 반복하는 infiniteRepeatable 함수가 존재

snap

• 즉시 종료값으로 이동