[kotlin] Jetpack Compose에서 애니메이션 처리하기

11 Dec 2023

kotlin

Jetpack Compose는 Android 앱 UI를 작성하고 관리하기 위한 모던한 도구입니다. Jetpack Compose는 사용자 인터페이스의 상태 변화와 애니메이션 처리를 간편하게 할 수 있는 풍부한 API를 제공합니다.

이 글에서는 Jetpack Compose를 사용하여 간단한 애니메이션을 처리하는 방법에 대해 알아보겠습니다.

애니메이션 기본 구성 요소

애니메이션 처리를 위해 Jetpack Compose에서 제공하는 세 가지 기본 구성 요소는 다음과 같습니다.

Animatable: 애니메이션의 상태를 관리하고 제어하는 데 사용됩니다. 애니메이션의 시작값과 끝값, 현재 값 및 애니메이션을 제어하는 메서드를 포함합니다.
Transition: 상태 변화를 처리하기 위한 구성요소로, 애니메이션의 시작 상태와 끝 상태 간의 전환을 처리합니다.
AnimatedContent: UI 구성요소(예: 텍스트, 이미지 등)에 애니메이션을 적용하는 데 사용됩니다.

애니메이션 예제

import androidx.compose.runtime.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.vector.*
import androidx.compose.ui.res.*
import androidx.compose.ui.tooling.*

@Composable
fun AnimatedComponent() {
    var size by remember { mutableStateOf(100.dp) }
    val sizeAnimation = remember { Animatable(100.dp) }

    LaunchedEffect(Unit) {
        sizeAnimation.animateTo(200.dp)
    }

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.size(size)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite",
            tint = Color.Red,
            modifier = Modifier.size(50.dp)
        )
    }
}

위의 예제에서는 Animatable 및 LaunchedEffect를 사용하여 크기가 변경되는 간단한 하트 아이콘을 표시하는 AnimatedComponent를 구현하였습니다.

LaunchedEffect는 컴포저블이 나타날 때 sizeAnimation이 100.dp에서 200.dp로 애니메이션되도록 합니다.

Jetpack Compose 애니메이션을 통해 앱에 생동감을 불어넣기

이제 Jetpack Compose의 간단한 애니메이션 처리 방법을 알아보았습니다. 이러한 도구와 구성요소를 통해 Android 앱에 생동감 있는 UI를 구축하고 사용자 경험을 향상시킬 수 있습니다.

더 많은 Jetpack Compose 애니메이션 처리에 대한 내용은 공식 문서를 참고하시기 바랍니다.