Jetpack Compose에서의 애니메이션 기능은 매우 다양하며 사용할 수 있는 여러 가지 메커니즘이 있습니다. 본 글에서는 Jetpack Compose의 애니메이션 기능을 활용하여 UI 구성요소에 다양한 애니메이션을 적용하는 방법에 대해 간략하게 설명하겠습니다.
AnimatedVisibility 컴포저블을 사용하면 컴포넌트를 화면에 표시하거나 숨길 때 애니메이션을 적용할 수 있습니다. 이 컴포저블은 내부적으로 자식 컴포저블의 보여짐과 사라짐을 처리합니다.
var visible by remember {
mutableStateOf(true)
}
AnimatedVisibility(visible) {
// 여기에 컴포저블을 배치
}
animateFloatAsState 함수를 사용하여 컴포저블의 투명도에 시간에 따라 변화하는 애니메이션을 적용할 수 있습니다. 이 방법은 컴포저블이 화면에서 보이지 않을 때도 공간을 차지한다는 단점이 있습니다.
val animatedAlpha by animateFloatAsState(
targetValue = if (visible) 1.0f else 0f
)
Box(
modifier = Modifier
.alpha(animatedAlpha)
.background(Color.Green)
)
animateColorAsState 함수를 이용하면 배경색에 부드러운 색 변화 애니메이션을 적용할 수 있습니다. 이는 Modifier.background를 사용하는 것보다 성능이 우수합니다.
val animatedColor by animateColorAsState(
targetValue = if (visible) Color.Green else Color.Blue
)
Box(
modifier = Modifier.background(animatedColor)
)
animateContentSize를 사용하면 컴포저블의 크기 변화에 애니메이션을 적용할 수 있습니다. 이는 크기 변경이 자연스럽게 느껴지도록 합니다.
var expanded by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.animateContentSize()
.size(if (expanded) Dp(400) else Dp(200))
.clickable { expanded = !expanded }
)
컴포저블의 위치 변경에도 애니메이션을 적용할 수 있습니다. animateIntOffsetAsState와 Modifier.offset을 조합하여 사용하세요.
var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
targetValue = if (moved) {
IntOffset(pxToMove, pxToMove)
} else {
IntOffset.Zero
},
label = "offset"
)
Box(
modifier = Modifier
.offset {
offset
}
.background(colorBlue)
.size(100.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
moved = !moved
}
)
이상의 내용은 Jetpack Compose를 사용하여 애니메이션을 적용하는 간단한 예시입니다. Compose는 훨씬 다양한 애니메이션 옵션을 제공하므로, 보다 복잡한 UI 상호작용과 생동감 있는 애니메이션을 구현할 수 있습니다. Jetpack Compose의 전체 애니메이션 기능을 활용하려면 공식 문서를 참조하는 것이 좋습니다.