12. 애니메이션 효과 - animateDpAsState (Jetpack Compose UI 코틀린 앱 개발 강의)

 

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

 

애니메이션 효과주기

Compose를 사용하여 앱의 UI에 동적인 애니메이션을 추가하는 것은 사용자 경험을 향상시키는 훌륭한 방법입니다. 이번 포스트에서는 Compose의 애니메이션 기능 중 하나인 animateDpAsState 컴포저블을 사용하여 간단한 애니메이션을 구현하는 방법을 안내하겠습니다.

 

 

기본 애니메이션 구현

먼저, animateDpAsState를 사용하여 특정 조건에 따라 UI 요소의 크기를 변화시키는 기본적인 애니메이션을 만듭니다. 예를 들어, 아래 코드는 "Show more" 버튼을 클릭하면 추가적인 패딩이 적용되도록 합니다.

 

@Composable
private fun Greeting(name: String) {
    var expanded by rememberSaveable { mutableStateOf(false) }
    val extraPadding by animateDpAsState(if (expanded) 48.dp else 0.dp)

    Surface(modifier = Modifier.padding(all = 8.dp)) {
        Column(modifier = Modifier.padding(bottom = extraPadding)) {
            Text(text = "Hello, $name")
            Button(onClick = { expanded = !expanded }) {
                Text(if (expanded) "Show less" else "Show more")
            }
        }
    }
}

 

 

스프링 애니메이션 추가

애니메이션을 더욱 흥미롭게 만들기 위해, spring 애니메이션 사양을 사용하여 물리적 속성(감쇠 및 강성)을 조정할 수 있습니다. 이를 통해 더 자연스러운 애니메이션 효과를 만듭니다.

 

val extraPadding by animateDpAsState(
    if (expanded) 48.dp else 0.dp,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )
)

 

 

 

 

 

애니메이션 중단 처리

 

animateDpAsState를 사용하여 만든 애니메이션은 중단될 수 있으며, 애니메이션 중간에 목표 값이 변경되면 애니메이션은 자연스럽게 새 값을 향해 재시작됩니다. 이는 특히 스프링 기반 애니메이션에서 더욱 자연스러운 전환을 보여줍니다.

 

 

이외 애니메이션

 

Compose에서는 animateDpAsState 외에도 다양한 애니메이션 API를 제공합니다. 예를 들어, animateColorAsState, spring, tween, repeatable 등 다양한 사양과 함수를 사용하여 다양한 유형의 애니메이션을 구현할 수 있습니다. 이러한 다양한 옵션을 탐색하면서 앱에 독특하고 매력적인 애니메이션을 추가해 보세요.

이번 포스트를 통해 Compose에서 제공하는 애니메이션 기능의 기본적인 사용 방법을 알아보았습니다. 애니메이션을 통해 사용자 경험을 향상시키고, 앱의 인터페이스를 더욱 동적이고 매력적으로 만들어 보세요.

 

 

---

• [Jetpack Compose] 가이드 맵으로 돌아가기