Compose UI – animate*AsState, AnimatedVisibility, Transition 등

Compose UI – animate*AsState, AnimatedVisibility, Transition 등

Jetpack Compose에서는 간단한 상태 기반 애니메이션부터 복잡한 트랜지션까지 다양한 애니메이션 API를 제공합니다. 이번 글에서는 대표적인 애니메이션 API인 animate*AsState, AnimatedVisibility, Transition 등을 활용하는 방법을 알아보겠습니다.

1. animate*AsState – 상태 기반 애니메이션

animate*AsState는 값이 변경될 때 부드럽게 변하는 애니메이션을 적용할 수 있는 API입니다.

예제: 크기 애니메이션 적용

@Composable
fun SizeAnimationExample() {
    var expanded by remember { mutableStateOf(false) }
    val size by animateDpAsState(if (expanded) 200.dp else 100.dp, animationSpec = tween(durationMillis = 500))

    Box(
        modifier = Modifier
            .size(size)
            .background(Color.Blue)
            .clickable { expanded = !expanded },
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Click Me", color = Color.White)
    }
}

• animateDpAsState를 사용하여 크기 변화 애니메이션 적용
• tween()을 이용해 지속 시간을 설정

2. AnimatedVisibility – 가시성 애니메이션

AnimatedVisibility는 특정 UI 요소의 가시성(보이기/숨기기)을 애니메이션으로 처리할 수 있습니다.

예제: 버튼 클릭 시 요소 보이기/숨기기

@Composable
fun VisibilityAnimationExample() {
    var visible by remember { mutableStateOf(false) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { visible = !visible }) {
            Text("Toggle Visibility")
        }
        AnimatedVisibility(visible) {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text("Hello!", color = Color.White)
            }
        }
    }
}

• AnimatedVisibility를 활용하여 요소의 보이기/숨기기를 부드럽게 처리
• visible 상태값을 기반으로 애니메이션 적용

3. Transition – 복합 애니메이션

Transition을 활용하면 여러 개의 상태 변화를 동시에 처리할 수 있습니다.

예제: 색상과 크기 변경 애니메이션

@Composable
fun TransitionExample() {
    var selected by remember { mutableStateOf(false) }
    val transition = updateTransition(targetState = selected, label = "Box Transition")

    val size by transition.animateDp(label = "Size Animation") { if (it) 150.dp else 100.dp }
    val color by transition.animateColor(label = "Color Animation") { if (it) Color.Green else Color.Gray }

    Box(
        modifier = Modifier
            .size(size)
            .background(color)
            .clickable { selected = !selected },
        contentAlignment = Alignment.Center
    ) {
        Text("Tap Me", color = Color.White)
    }
}

• updateTransition을 활용하여 size와 color를 동시에 애니메이션 처리
• animateDp()와 animateColor()로 각각 다른 속성을 변경 가능

결론

• animate*AsState는 값의 변경을 부드럽게 애니메이션 처리
• AnimatedVisibility를 통해 UI 요소의 가시성 전환을 쉽게 적용 가능
• Transition을 활용하여 여러 속성을 동시에 애니메이션화 가능

---

다음 글에서는 네비게이션 – Navigation Compose 활용을 다루겠습니다.