📱Jetpack Compose로 배우는 애니메이션과 그래픽

💠시각적 애니메이션

AnimateVisibility란?

• 특정 UI 요소를 보이거나 숨길 때 자연스럽게 애니메이션 효과를 주기 위한 컴포저블
• 단순한 if 문으로 조건을 나누는 대신, 보임/숨김 상태를 자연스럽게 연결해주는 브릿지 역할
• 기본 사용법

var isVisible by remember { mutableStateOf(true) }

Column {
    Button(onClick = { isVisible = !isVisible }) {
        Text("토글")
    }

    AnimatedVisibility(visible = isVisible) {
        Text("보이거나 숨겨지는 텍스트입니다.")
    }
}

=> isVisible의 값이 바뀌면 Text의 등장과 사라짐이 애니메이션으로 처리, 단순히 View를 추가&제거하는 것보다 훨씬 부드러운 UX를 만들어줌

진입 / 이탈 애니메이션 정의

• AnimatedVisibility는 기본적으로 fade 효과가 적용되지만, 더 풍부한 애니메이션을 직접 지정 가능
• 다양한 UI 효과

AnimatedVisibility(
    visible = isVisible,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutHorizontally()
) {
    Text("다양한 애니메이션이 적용된 텍스트")
}

-> 진입 시 위에서 슬라이드 + 페이드 인
-> 이탈 시 오른쪽으로 슬라이드 + 페이드 아웃

애니메이션 스펙과 이징

• 애니메이션의 속도와 흐름 제어 가능
• ex) tween, spring, keyframes 등을 사용해 세부적인 제어 가능

val slideSpec = tween(
    durationMillis = 1000,
    easing = FastOutSlowInEasing
)

• tween: 선형 애니메이션

• spring: 탄력 있게 튀는 느낌

• keyframes: 시간마다 값을 수동 지정

• easing: 가속/감속 곡선 (UI의 자연스러움에 큰 영향)
  
  

애니메이션 반복하기

• InfiniteTransition을 이용해 텍스트의 투명도를 반복적으로 변화시키는 예시

val infiniteTransition = rememberInfiniteTransition()
val alpha by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(1000),
        repeatMode = RepeatMode.Reverse
    )
)

=> 반복 애니메이션은 로딩 애니메이션이나 호흡하는 버튼 효과 등에 유용하게 사용

자식별로 각각 애니메이션 적용하기

• AnimatedVisibility의 내부 요소들에 각각 다른 애니메이션 부여 가능

AnimatedVisibility(visible = isVisible) {
    Column {
        Text("첫 번째", modifier = Modifier.animateEnterExit(
            enter = fadeIn(), exit = fadeOut()
        ))
        Text("두 번째", modifier = Modifier.animateEnterExit(
            enter = slideInHorizontally(), exit = slideOutHorizontally()
        ))
    }
}

=> 하나의 AnimatedVisibility 안에서도 각 요소마다 다양한 효과를 넣을 수 있어서 표현력 증가

자동으로 애니메이션 시작하기

• 컴포넌트가 자동으로 애니메이션 효과와 함께 등장하게 만들려면 LaunchedEffect 사용

var isVisible by remember { mutableStateOf(false) }

LaunchedEffect(Unit) {
    isVisible = true
}

=> 앱 시작 시 로고, 인트로 텍스트 등을 자연스럽게 나타내는 데 활용

Crossfade – 부드러운 전환

• 서로 다른 화면이나 상태 전환을 자연스럽게 연결

Crossfade(targetState = screen) { state ->
    when (state) {
        "Home" -> HomeScreen()
        "Profile" -> ProfileScreen()
    }
}

=> 버튼 클릭 → 홈 ↔ 프로필 화면 전환 시 페이드 효과로 시선이 끊기지 않도록 도와줌

💠상태 주도 애니메이션

animateFloatAsState – 회전 효과

val angle by animateFloatAsState(targetValue = if (clicked) 360f else 0f)

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = null,
    modifier = Modifier.rotate(angle)
)

=> 버튼 클릭 시 이미지 회전
=> rotate()에 애니메이션 상태 값을 바인딩하는 방식

animateColorAsState – 색상 변경

• 버튼 클릭으로 색상이 부드럽게 전환

val color by animateColorAsState(targetValue = if (clicked) Color.Red else Color.Blue)

Box(modifier = Modifier.size(100.dp).background(color))

animateDpAsState – 위치 이동

• 요소가 부드럽게 이동하면서 움직이는 인터랙션

val offset by animateDpAsState(
    targetValue = if (isClicked) 200.dp else 0.dp
)
Box(modifier = Modifier.offset(x = offset))

spring, keyframes로 정교하게 제어

• spring은 말랑말랑한 튀는 효과
• keyframes는 시간대별 크기, 위치를 수동으로 지정

val scale by animateFloatAsState(
    targetValue = 1.5f,
    animationSpec = spring(dampingRatio = Spring.DampingRatioLowBouncy)
)

💠Canvas 그래픽 그리기

Canvas란?

• 직접 2D 그래픽을 그릴 수 있는 컴포저블
• 다양한 도형, 이미지, 선 등을 수동으로 그릴 수 있어 UI를 정밀하게 조작 가능

기본 도형 그리기

• UI에 데이터 시각화, 차트, 도형 디자인 등을 표현할 때 매우 유용
  • drawLine: 선
  • drawRect: 사각형
  • drawCircle: 원

Canvas(modifier = Modifier.size(200.dp)) {
    drawLine(Color.Black, Offset(0f, 0f), Offset(100f, 100f))
    drawRect(Color.Green, Offset(50f, 50f), Size(80f, 80f))
    drawCircle(Color.Blue, center = Offset(100f, 100f), radius = 40f)
}

점선 그리기

• PathEffect.dashPathEffect()를 사용하면 선을 점선 변경 가능

drawLine(
    color = Color.Red,
    start = Offset(0f, 50f),
    end = Offset(200f, 50f),
    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f))
)

이미지 그리기

• 그래프나 다이어그램 위에 이미지를 오버레이 할 때

val image = ImageBitmap.imageResource(id = R.drawable.sample)

Canvas(modifier = Modifier.size(200.dp)) {
    drawImage(image)
}