Compose의 Animation

Compose Animation

• Composable 함수이며 suspend 함수.

1. 레이아웃에서 콘텐츠 변경 사항을 애니메이션 처리

   • 나타남과 사라짐 - AnimatedVisibility
   • 콘텐츠 교체 - Crossfade / AnimatedContent

2. 애니메이션이 상태 기반인 경우이고 컴포지션 도중

   • 애니메이션이 무제한 - rememberInfiniteTransition
   • 여러 값을 동시에 애니메이션 - updateTransition
   • 그 외에 (컴포지션 아닐 때) - animateAsState

3. 애니메이션 시간을 세밀하게 관리 - Animation

4. 애니메이션이 유일한 정보 소스 - Animatable

5. 그 외 - AnimationState, animate

상위 수준 애니메이션 API

1. AnimatedVisibility
   - 콘텐츠 표시와 사라짐을 애니메이션 처리
   - 기본적으로 fade in - fade out 방식
   - enter, exit transition을 설정하여 전환 설정 가능
   

• Animation 상태 관찰
  
  MutableTransitionState를 통해 현재 애니메이션의 진행 상태 정보를 얻을 수 있음

• 애니메이션 추가
  
  AnimatedVisibility의 transition 속성을 이용.
  위 예제에선 Box background를 추가적으로 애니메이션 처리.

2. AnimatedContent
   - 타겟 상태에 따라 변경될 때 콘텐츠에 애니메이션 적용
   
   API는 타겟을 키로 사용해 콘텐츠를 식별하며, 람다 매개변수를 사용해 콘텐츠에 반영해야 함

• SizeTransform: 초기 콘텐츠와 타겟 콘텐츠 사이에 크기가 애니메이션 되는 방식 정의
  
  초기에 expanded값이 false인 상태에서 아이콘을 클릭하면 Expanded 상태의 콘텐츠로 변화하는데 width가 먼저 변화하고 다음 height가 변화되는 예시

3. Crossfade
   - 두 레이아웃을 크로스 페이스 애니메이션을 이용해 전환
   

하위 수준 애니메이션 API

1. animateAsState
   - 단일 값을 애니메이션 처리하는 가장 간단한 API
   

2. Animatable
   - 값이 animateTo를 통해 변경될 때 값을 애니메이션으로 표현
   - 많은 기능들이 정지 함수로 제공되므로 적절한 코루틴 범위에 매핑
   
   animateTo는 정지 함수이므로 값 변경 중에 진행되던 애니메이션은 취소되고 새로운 애니메이션 시작

3. updateTransition
   - Transition: 하나 이상의 애니메이션을 하위 요소로 관리하고 동시 실행
   - AnimatedVisibility와 AnimatedContent를 확장 함수로 사용 가능
   
   selected 속성을 updateTransition을 통해 Transition으로 관리하며, Surface 내에서 AnimatedVisibility와 AnimatedContent를 동시 실행

4. rememberInfiniteTransition
   - Transition같이 하나 이상의 애니메이션이 포함되지만 컴포지션 시작 시 애니메이션 시작하며 삭제되지 않으면 중단하지 않음
   

5. TargetBasedAnimation

   • 애니메이션 재생 시간을 직접 관리 가능

애니메이션 맞춤 설정

• animationSpec: 애니메이션 처리될 콘텐츠의 타입 및 구성 등의 정보를 담음.

1. tween: durationTime, delayMillis, Easing 값 존재하며 Duration 동안 시작 값과 끝 값 간에 애니메이션 처리.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    )
)
 -> LinearOutSlowInEasing 효과를 사용하며 50ms 이후 300ms동안 1f로 애니메이션.

2. spring: dampingRatio(바운스 효과), stiffness(종료 값으로 이동하는 속도), visibilityThreshold() 값 존재.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    )
)
 -> 높은 Bounce 효과, StiffnessMediun 속도로 1f로 애니메이션

3. keyframes: tween과 유사하게 Duration을 조정하나, 1개의 block parameter만 존재하며 블록 내에서 durationMillis, delayMillis, keyframes값을 조정. keyframes 외엔 tween과 동일한 기능이며 keyframe은 animation timeline의 single point.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    }
)
 -> 375ms동안 0ms~15ms는 LinearOutSlowInEasing 효과로, 
 15ms~75ms는 FastOutLinearInEasing효과로,
 75ms ~ 375ms는 기본 효과로 애니메이션

4. repeatable: 애니메이션 효과가 반복되도록 할 수 있음. 반복 횟수 지정 가능

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
 -> Reverse효과로 3번 tween 애니메이션 반복

5. infiniteRepeatable: 무한 반복되는 애니메이션 효과

6. snap: 목표 값으로 애니메이션을 즉시 완료

• AnimationVector
  - 애니메이션 중에 모든 애니메이션 값은 AnimationVector로 처리.
  차원에 따라 AnimationVector(1, 2, 3, 4)D로 표현 가능
  ex) Color는 RGBA 4개의 값을 사용하여 AnimationVector4D로 변환.

+) TwoWayConverter: AnimationVector로 변경해 주는 역할