타임라인과 상태 머신

대부분의 애니메이션 내보내기는 타임라인을 만듭니다. 애니메이션이 시작되고, 시간에 따라 재생되고, 반복 재생하거나 멈추며, 다음에 무엇이 일어날지 정하는 데 사용자 입력이 필요하지 않습니다.

인터랙티브 Figma 내보내기는 다릅니다. 사용자 입력이 애니메이션의 상태를 바꾸는 dotLottie 상태 머신이 될 수 있습니다.

타임라인 방식 애니메이션

타임라인 방식 애니메이션은 다음에 좋습니다.

• 로딩 애니메이션.

• 성공 또는 오류 피드백.

• 로고 반복 재생.

• 단순 UI 전환.

• 선형 온보딩 모션.

프리셋, 여러 프레임, 대부분의 프로토타입 플로우 내보내기는 타임라인 방식 애니메이션처럼 동작합니다. 더 작은 파일과 최신 재생 환경에는 dotLottie를 우선하세요. 목적지가 레거시 lottie-web 호환성을 요구할 때만 Lottie JSON을 사용합니다.

상태 머신 애니메이션

상태 머신은 다음에 좋습니다.

• hover와 press 상태가 있는 버튼.

• 토글.

• 인터랙티브 아이콘.

• click, hover, press, 시간 지연 전환에 반응하는 컴포넌트.

상태 머신 동작은 .lottie에 보존해야 합니다. Lottie JSON은 상태 머신 인터랙션, 테마, 모션 토큰을 담을 수 없습니다.

디자이너 관점의 이해

타임라인 애니메이션은 영상 클립과 같습니다. 재생하면 시간이 앞으로 흐릅니다.

상태 머신은 규칙이 있는 컴포넌트 variant 시스템과 같습니다. 입력이 발생하면 애니메이션이 상태 사이를 이동할 수 있습니다.

관련 문서

• 인터랙티브 상태 머신 내보내기

• 출력 형식 선택

• 플레이어 컨트롤