[Android/Compose] 애니메이션 빠르게 알아보기

Jetpack Compose에서의 애니메이션 기능은 매우 다양하며 사용할 수 있는 여러 가지 메커니즘이 있습니다. 본 글에서는 Jetpack Compose의 애니메이션 기능을 활용하여 UI 구성요소에 다양한 애니메이션을 적용하는 방법에 대해 간략하게 설명하겠습니다.

애니메이션의 appearing(보여짐)과 disappearing(사라짐)

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의 전체 애니메이션 기능을 활용하려면 공식 문서를 참조하는 것이 좋습니다.