[Jetpack Compose] AnimatedVisibility

1. Animation API란?

---

Jetpack Compose에서 제공하는  Animation API를 이용하면 사용자 인터페이스에

화면 전환, 크기 변화, 색상 변화 등 다양한 애니메이션 효과를 쉽게 추가할 수 있다

Animation API는 여러 클래스와 함수로 구성되며 주요 Animation API들은 크게

상태 기반 애니메이션과 트랜지션 기반 애니메이션으로 나눌 수 있다

 

https://developer.android.com/develop/ui/compose/animation/introduction

Compose의 애니메이션  |  Jetpack Compose  |  Android Developers

2. AnimatedVisibility

---

@Composable
fun AnimatedVisibilityExample() {
    var isVisible by remember { mutableStateOf(true) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { isVisible = !isVisible }) {
            Text("Toggle Visibility")
        }

        Spacer(modifier = Modifier.height(16.dp))

        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn(animationSpec = tween(durationMillis = 500)),
            exit = fadeOut(animationSpec = tween(durationMillis = 500))
        ) {
            Text("Hello, Jetpack Compose!")
        }
    }
}

AnimatedVisibility는 특정 UI 요소의 가시성을 컨트롤하면서 애니메이션을 적용하는 데 사용되는 API이다

컴포넌트가 갑자기 나타나거나 사라지는 대신 AnimatedVisibility 컴포저블을 이용해

좀 더 자연스러운 UI작성이 가능하다

예를 들어, 사용자 인터페이스 요소가 화면에 서서히 나타나거나 화면에서 사라질 수 있으며

수직, 수평 위로 이동하면서 나타나거나 사라질 수도 있고 확장하거나 줄어들면서 나타나거나 사라질 수도 있다

AnimatedVisibility의 visible 속성을 통해 요소의 가시성을 제어하며,

enter와 exit 애니메이션을 사용하여 요소가 나타나고 사라질 때의 애니메이션 효과를 지정한다

이 외에도 다음과 같은 애니메이션 효과를 사용할 수 있다

 

expandHorizontally(): 수평으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

(컴포저블이 왼쪽에서 오른쪽으로 가로 방향으로 확장되면서 나타나도록 하는 애니메이션)

 

expandVertically(): 수직으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

(컴포저블이 위에서 아래로 세로 방향으로 확장되면서 나타나도록 하는 애니메이션)

 

expandIn(): 수직 및 수평으로 자르는 기법을 이용해 컴포저블을 표시한다

애니메이션을 시작하기 전 최초에 표시할 컴포저블의 정도를 옵션으로 제어할 수 있다

 

fadeIn(): 투명한 상태에서 불투명한 상태로 컴포저블을 뷰에 표시한다

초기 alpha값은 0에서 1.0 사이로 선언 가능하며 기본값은 0이다

 

fadeOut(): 불투명한 상태에서 투명한 상태로 컴포저블을 뷰에서 사라지게 한다

대상이 완전히 사라지기 전의 alpha값을 0에서 1.0 사이로 선언 가능하며 기본값은 0이다

 

scaleIn(): 확대(zoom in)한 것처럼 컴포저블이 뷰로 확장된다

기본적으로 컴포저블은 아무것도 없는 상태에서 전체 크기로 확장되지만, 초기 비율값을 0에서 1.0 사이의

부동소수점 값으로 지정할 수 있다

 

scaleOut(): 컴포저블을 전체 크기에서 지정한 대상 비율까지 줄인 뒤 사라지게 한다

대상 비율의 기본값은 0이며, 0에서 1.0 사이의 부동소수점 값으로 설정할 수 있다

 

shrinkHorizontally(): 컴포저블은 수평 경계선까지 축소된 후 슬라이드하며 사라진다

대상 폭과 슬라이드 방향을 설정할 수 있다

 

shrinkVertically(): 컴포저블은 수직 경계선까지 축소된 후 슬라이드하며 사라진다

대상 폭과 슬라이드 방향을 설정할 수 있다

 

shrinkOut(): 컴포저블은 수직/수평 경계선까지 축소된 뒤 슬라이드하며 사라진다

 

slideInHorizontally(): 컴포저블은 수평축을 따라 슬라이드하며 표시된다

슬라이드 방향과 슬라이드를 시작할 오프셋을 지정할 수 있다

 

slideInVertically(): 컴포저블은 수직축을 따라 슬라이드하며 표시된다

슬라이드 방향과 슬라이드를 시작할 오프셋을 지정할 수 있다

 

slideIn(): 컴포저블이 초기 오프셋 값으로 지정한 각도에서 슬라이드하며 표시된다

 

slideOut(): 컴포저블이 대상 오프셋 값으로 지정한 각도로 슬라이드하며 사라진다

 

slideOutHorizontally(): 컴포저블은 수평축을 따라 슬라이드하며 사라진다

슬라이드 방향과 슬라이드를 종료할 오프셋을 지정할 수 있다

 

slideOutVertically(): 컴포저블은 수직축을 따라 슬라이드하며 사라진다 슬라이드 방향과 슬라이드를 종료할 오프셋을 지정할 수 있다

 

https://developer.android.com/develop/ui/compose/animation/composables-modifiers

애니메이션 수정자 및 컴포저블  |  Jetpack Compose  |  Android Developers

3. AnimationSpec

---

AnimatedVisibility(
    visible = isVisible.value,
    enter = tween(
        durationMillis = 500,
        delayMillis = 100 // 애니메이션 시작 전 지연 시간
    ),
    exit = tween(
        durationMillis = 500,
        delayMillis = 100 // 애니메이션 시작 전 지연 시간
    )
) {
    // 애니메이션 효과가 적용될 내용
}

AnimationSpec을 사용하면 애니메이션의 유지 시간, 시작 지연, 스프링, 튕김 효과, 반복, 애니메이션 Easing을 포함한 여러 애니메이션 동작의 측면을 설정할 수 있다

Row, Column 및 다른 컨테이너 컴포저블과 마찬가지로, AnimatedVisibility도 고유한 스코프를 갖으며

이 스코프 안에서 애니메이션에 대한 추가 함수에 접근할 수 있다

tween() 함수를 호출하여 AnimationSpec의 인스턴스를 생성하고, 이를 애니메이션 효과 함수의 파라미터로 전달하여 사용할 수 있다

 

durationMillis(): 애니메이션이 완료되는 데 걸리는 시간입니다. 밀리초(ms) 단위로 설정한다

 

delayMillis(): 애니메이션이 시작되기 전에 기다리는 시간입니다. 밀리초(ms) 단위로 설정한다

 

easing(): 애니메이션의 속도를 제어하는 함수로, 애니메이션이 어떻게 가속하거나 감속할지를 결정한다

 

repeatable(): 애니메이션을 반복할 수 있도록 설정할 수 있으며, 반복 횟수와 방향을 지정할 수 있다

4. Easing

---

val animationSpec = tween(
    durationMillis = 500,
    easing = FastOutSlowInEasing
)

AnimatedVisibility(
    visible = isVisible.value,
    enter = animationSpec,
    exit = animationSpec
) {
    // 애니메이션 효과가 적용될 내용
}

애니메이션 이징(Easing)은 애니메이션의 속도가 시간에 따라 어떻게 변화하는지를 정의하는 함수이다

Easing을 사용하면 애니메이션이 단순히 일정한 속도로 움직이는 것보다 더 자연스럽고 부드럽게 보이도록 만들 수 있다

Easing은 tween()를 이용해 지정하며 애니메이션의 시작, 중간, 끝 부분에서 속도를 가속하거나 감속하는 데 사용된다

 

LinearEasing(): 애니메이션이 일정한 속도로 진행된다

속도의 변화 없이 일정하게 움직이기 때문에 가장 단순한 형태의 Easing이다

 

FastOutSlowInEasing(): 애니메이션이 빠르게 시작하고 점점 느려지며 종료된다

자연스러운 감속 효과를 주어, UI 요소가 부드럽게 멈추는 느낌을 준다

 

EaseInEasing(): 애니메이션이 느리게 시작해서 점점 빠르게 진행된다

시작 부분이 부드럽고 끝부분으로 갈수록 속도가 빨라진다

 

EaseOutEasing(): 애니메이션이 빠르게 시작하고 점점 느려지며 종료된다

시작할 때 빠르고, 마무리할 때 부드럽게 멈춘다

 

EaseInOutEasing(): 애니메이션이 느리게 시작해서 중간에 가속되고, 다시 느려지면서 종료된다

부드러운 가속과 감속이 함께 발생한다

 

BounceEasing(): 애니메이션이 끝날 때 튕기는 효과를 준다.

공이 떨어졌다가 바닥에서 튕기는 것 같은 동작을 모방한 Easing이다

 

CubicBezierEasing(): 커스텀 베지어 곡선을 이용해 Easing 곡선을 직접 정의할 수 있다

네 개의 제어점을 통해 애니메이션의 속도 변화를 정밀하게 조정할 수 있습니다.

예시 easing = CubicBezierEasing(0.42f, 0.0f, 0.58f, 1.0f)

(여기서 숫자들은 베지어 곡선의 제어점)

 

LinearOutSlowInEasing(): 애니메이션이 일정한 속도로 시작한 후 느리게 종료된다

FastOutSlowInEasing과 비슷하지만, 시작 부분이 일정한 속도로 진행된다는 점이 다르다

 

FastOutLinearInEasing(): 애니메이션이 빠르게 시작하고, 그 후 일정한 속도로 종료된다

EaseInOutEasing과 반대의 속도 곡선을 갖는다