지난 글에서 다룬 체크박스를 다시 보자. 지금은 체크하면 그냥 "뚝" 하고 상태가 바뀐다. 완료된 할 일은 배경색이 스르륵 바뀌고, 삭제하면 슥 사라지게 만들어보자.

지금 코드는 값이 바뀌면 그냥 바로 바뀐다

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(if (todo.isDone) Color(0xFFE0F2E9) else Color.Transparent)
) {
    // ...
}

체크박스를 누르면 todo.isDone이 바뀌고, 그 즉시 배경색이 초록색 ↔ 투명 사이를 뚝뚝 끊기면서 바뀐다. 색이 서서히 변하길 바란다면 색 자체를 "서서히 바뀌는 값"으로 만들어야 한다.

animateColorAsState - 값 하나를 서서히 바꿔준다

val backgroundColor by animateColorAsState(
    targetValue = if (todo.isDone) Color(0xFFE0F2E9) else Color.Transparent,
    label = "todoBackground"
)

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(backgroundColor)
) {
    // ...
}

[이미지: 체크박스를 누르는 순간 배경색이 서서히 초록색으로 바뀌어가는 중간 단계 화면]

animateColorAsState는 targetValue가 바뀔 때마다 "지금 값에서 목표 값까지" 중간 색상들을 프레임마다 계산해서 돌려준다. 코드에서 하는 일은 if로 목표 색을 정해주는 것뿐이고, 실제로 서서히 바뀌는 애니메이션은 이 함수가 알아서 처리한다. Int, Dp, Float 같은 값에도 각각 animateIntAsState, animateDpAsState, animateFloatAsState가 있는데, 전부 "목표값을 주면 그 값까지 서서히 변하는 State를 돌려준다"는 같은 원리다.

AnimatedVisibility - 생기고 사라지는 것 자체에 애니메이션

삭제 버튼을 누르면 그 항목이 리스트에서 바로 사라지는데, 스르륵 접히면서 사라지게 해보자.

items(todoList, key = { it.id }) { todo ->
    var visible by remember { mutableStateOf(true) }

    AnimatedVisibility(
        visible = visible,
        exit = shrinkVertically() + fadeOut()
    ) {
        Row(
            modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
        ) {
            // ...
            IconButton(onClick = {
                visible = false
            }) {
                Icon(imageVector = Icons.Default.Delete, contentDescription = "삭제")
            }
        }
    }
}

animateColorAsState는 "값 하나"가 서서히 바뀌는 거였는데, AnimatedVisibility는 그 안의 내용 전체가 나타나거나 사라지는 과정 자체를 애니메이션으로 다룬다. exit = shrinkVertically() + fadeOut()은 "사라질 때 세로로 줄어들면서 동시에 투명해진다"는 뜻이다. visible을 바로 false로 바꾸는 대신, 애니메이션이 끝날 때까지는 화면에 남아있다가 끝나고 나서 실제로 리스트에서 빼는 식으로 쓰면 더 자연스럽다(지금 예제는 간단히 visible만 바꾸는 버전이다).

Transition - 여러 값을 하나의 타이밍으로 묶어서 움직이기

색 하나, 보이기/감추기 하나씩은 animate*AsState와 AnimatedVisibility로 충분하다. 근데 "체크될 때 배경색도 바뀌고 동시에 아이콘도 커졌다가 작아지고"처럼 여러 값이 같은 타이밍으로 묶여서 움직여야 하면 updateTransition을 쓴다.

val transition = updateTransition(targetState = todo.isDone, label = "todoState")

val backgroundColor by transition.animateColor(label = "bg") { isDone ->
    if (isDone) Color(0xFFE0F2E9) else Color.Transparent
}
val scale by transition.animateFloat(label = "scale") { isDone ->
    if (isDone) 1.1f else 1f
}

updateTransition이 todo.isDone이라는 하나의 상태를 기준으로, 그 상태에 묶인 여러 애니메이션 값(backgroundColor, scale)을 한 번에 관리해준다. 각각 따로 animateColorAsState, animateFloatAsState를 썼을 때보다, "하나의 상태 전환에 묶인 애니메이션들"이라는 관계가 코드에 더 분명하게 드러난다.

정리

• 값 하나가 서서히 바뀌어야 하면 animate*AsState (animateColorAsState, animateDpAsState 등)
• 뭔가 나타나거나 사라지는 과정 자체를 애니메이션으로 다루려면 AnimatedVisibility
• 여러 애니메이션 값이 하나의 상태 전환에 묶여서 같이 움직여야 하면 updateTransition

다음 글에서는 애니메이션처럼 눈에 보이는 게 아니라, 화면이 버벅이지 않게 "불필요한 리컴포지션"을 줄이는 방법을 보겠다.