[Android] AnimatedContent와 다양한 효과

📌 AnimatedContent란?

AnimatedContent는 Jetpack Compose에서 콘텐츠의 전환을 부드럽게 처리할 수 있는 컴포넌트입니다. 이 컴포넌트를 사용하면 상태 변화에 따라 콘텐츠가 자연스럽게 애니메이션되며, 사용자에게 시각적으로 매력적인 경험을 제공합니다. 예를 들어, 버튼 클릭 시 텍스트가 변경되거나, 리스트의 항목이 추가되거나 삭제될 때 애니메이션 효과를 줄 수 있습니다.

📌 애니메이션 전환 정의

AnimatedContent는 다양한 애니메이션 전환을 정의할 수 있는 여러 속성을 제공합니다. 이 속성들은 콘텐츠가 화면에 들어오거나 나갈 때의 애니메이션을 조정하는 데 사용됩니다.

• enterTransition
  새로운 콘텐츠가 화면에 들어올 때 적용되는 애니메이션을 정의합니다. AnimatedContentTransitionScope를 사용하여 현재 내비게이션 스택의 상태에 따라 애니메이션을 조정할 수 있습니다. 반환값은 EnterTransition? 타입으로, 애니메이션 효과를 정의하는 데 사용됩니다.
  

• exitTransition
  현재 콘텐츠가 화면에서 나갈 때 적용되는 애니메이션을 정의합니다. enterTransition과 마찬가지로 AnimatedContentTransitionScope를 사용하여 애니메이션을 조정합니다. 반환값은 ExitTransition? 타입입니다.
  

• popEnterTransition
  사용자가 이전 화면으로 돌아올 때(뒤로 가기) 새로운 콘텐츠가 화면에 들어올 때 적용되는 애니메이션을 정의합니다. 이 애니메이션은 exitTransition과 반대의 효과를 가질 수 있습니다.
  

• popExitTransition
  사용자가 이전 화면으로 돌아갈 때 현재 콘텐츠가 화면에서 나갈 때 적용되는 애니메이션을 정의합니다. 이 애니메이션은 enterTransition과 반대의 효과를 가질 수 있습니다.
  

• sizeTransform
  콘텐츠의 크기 변환 애니메이션을 정의합니다. 콘텐츠가 전환될 때 크기가 어떻게 변화하는지를 설정할 수 있습니다. 반환값은 SizeTransform? 타입으로, 크기 변환 애니메이션을 정의하는 데 사용됩니다.
  

아래와 같이 사용할 수 있다.

composable(
	Screen.TimerScreen.route,
	exitTransition = {
		if (navController.currentBackStackEntry?.destination?.route == Screen.OneMinuteScreen.route) {
			slideOutOfContainer(
				towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right,
				animationSpec = tween(700)
			)
		} else {
			null
		}
	},
	popEnterTransition = {
		slideIntoContainer(
			towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left,
			animationSpec = tween(700)
        )
    }
)

📌 여기서 Tween이란?

@Stable
public fun <T> tween(
  durationMillis: Int = COMPILED_CODE,
  delayMillis: Int = COMPILED_CODE,
  easing: Easing = COMPILED_CODE
): TweenSpec<T

Tween 애니메이션은 UI 요소의 상태 변화에 따라 부드러운 전환 효과를 제공하여 사용자 경험을 향상시킵니다.
TweenSpec은 애니메이션의 타이밍을 정의하는 데 사용되는 클래스입니다.

• durationMillis
  애니메이션이 진행되는 총 시간을 밀리초 단위로 설정합니다.

• delayMillis
  애니메이션이 시작되기 전에 대기할 시간을 밀리초 단위로 설정합니다.

• easing
  애니메이션의 속도 곡선을 정의하는 함수입니다. 기본적으로 선형 보간이 사용되지만, 다양한 이징 함수를 사용할 수 있습니다. 이징 함수는 애니메이션의 시작과 끝 속도를 조절하여 더 자연스러운 움직임을 제공합니다. 예를 들어, FastOutSlowInEasing은 애니메이션이 빠르게 시작하고 느리게 끝나는 효과를 줍니다.

📌 다양한 애니메이션 효과

• fade
  콘텐츠가 서서히 나타나거나 사라지는 효과입니다. 투명도 변화를 통해 부드러운 전환을 제공합니다.
  예: fadeIn() 또는 fadeOut()
  

• slide
  콘텐츠가 수평 또는 수직 방향으로 이동하는 애니메이션입니다. 사용자가 콘텐츠의 위치 변화를 쉽게 인식할 수 있도록 도와줍니다.
  예: slideInHorizontally() / slideOutHorizontally(), slideInVertically() / slideOutVertically()
  

• scale
  콘텐츠의 크기를 변경하는 애니메이션입니다. 콘텐츠가 커지거나 작아지는 효과를 줄 수 있습니다.
  예: scaleIn() 또는 scaleOut()
  

• expand / shrink
  콘텐츠가 확장되거나 축소되는 애니메이션입니다. 주로 레이아웃의 크기가 변할 때 사용됩니다.
  예: expandIn() 또는 shrinkOut()
  

• rotate
  콘텐츠가 회전하는 애니메이션입니다. 콘텐츠가 회전하면서 나타나거나 사라지는 효과를 줄 수 있습니다.
  예: rotateIn() 또는 rotateOut()
  

• tint
  콘텐츠의 색상을 변경하는 애니메이션입니다. 색상이 서서히 변하는 효과를 줄 수 있습니다.
  

---

애니메이션 적용