아래 다이어그램은 애니메이션을 구현하는 데 사용할 API를 결정하는 데 도움이 됩니다.
아래의 결정 트리 질문에 따라 사용 사례에 가장 적합한 애니메이션 API를 선택하세요.
- 애니메이션이 여러 시각적 요소(예: SVG 또는 이미지)로 구성된 예술작품에 가깝나요?
- 예: 간단한 SVG가 있나요? 즉, 마이크로 애니메이션이 있는 아이콘인가요?
- 예:
AnimatedVectorDrawable
- 아니요: 서드 파티 애니메이션 프레임워크(예:
Lottie
)
- 예:
- 아니요: 계속 반복해야 하나요?
- 예:
rememberInfiniteTransition
- 아니요: 레이아웃 애니메이션인가요?
- 예: 콘텐츠가 다른 여러 컴포저블 간에 전환
- 예: navigation-compose 사용
- 예:
enterTransition
및exitTransition
가 설정된composable()
- 아니요:
AnimatedContent
,Crossfade
또는Pager
- 예:
- 아니요: 표시 / 사라짐 애니메이션
- 예:
Modifier.alpha()
와 함께AnimatedVisibility
또는animateFloatAsState
- 아니요: 크기 애니메이션
- 예:
Modifier.animateContentSize
- 아니요: 다른 레이아웃 속성(예: 오프셋, 패딩 등)
- 예: '속성이 서로 완전히 독립적입니까?'를 참고하세요.
- 아니요: 목록 항목 애니메이션
- 예:
animateItemPlacement()
(재정렬 및 삭제는 곧 제공 예정)
- 예:
- 예:
- 예:
- 예: navigation-compose 사용
- 아니요: 여러 속성에 애니메이션을 적용해야 하나요?
- 예: 속성이 서로 완전히 독립적입니까?
- 예:
animate*AsState
, 텍스트의 경우TextMotion.Animated
사용 - 아니요: 동시에 시작
- 예: 예:
AnimatedVisibility
,animateFloat
,animateInt
등이 포함된updateTransition
- 아니요:
animateTo
가 다른 타이밍으로 호출된Animatable
(정지 함수 사용)
- 예: 예:
- 예:
- 아니요: 애니메이션에 사전 정의된 타겟 값 집합이 있나요?
- 예:
animate*AsState
, 텍스트의 경우TextMotion.Animated
사용 - 아니요: 동작 기반 애니메이션 애니메이션이 유일한 정보 소스인가요?
- 예:
Animatable
및animateTo
/snapTo
- 아니요: 상태 관리가 없는 원샷 애니메이션
- 예:
AnimationState
또는animate
- 아니요: 답변이 없나요? 기능 요청 제출
- 예:
- 예:
- 예:
- 예: 속성이 서로 완전히 독립적입니까?
- 예: 콘텐츠가 다른 여러 컴포저블 간에 전환
- 예:
- 예: 간단한 SVG가 있나요? 즉, 마이크로 애니메이션이 있는 아이콘인가요?
다이어그램의 PDF 버전을 다운로드합니다.