상태 머신 테스트

애플리케이션 이벤트와 연결하기 전에 미리 보기에서 인터랙티브 애니메이션 로직을 테스트하세요.

요구 사항

상태 머신은 .lottie 파일 안에 저장됩니다. 테스트와 연동 과정에서는 dotLottie 원본을 그대로 사용하세요. Lottie JSON으로 내보내면 상태 머신 정의가 사라집니다.

상태 머신 시작

1. 상태 머신이 하나 이상 포함된 .lottie 파일을 엽니다.

2. 상태 머신 또는 interactivity 패널을 펼칩니다.

3. 사용할 상태 머신을 선택합니다.

4. 시작 작업을 클릭합니다.

5. 미리 보기나 표시된 입력값을 조작합니다.

다른 상태 머신으로 전환하기 전에 중지하거나 초기화하세요.

입력과 이벤트 확인

패널에는 상태 머신에 정의된 입력과 이벤트가 표시될 수 있습니다. 대표적인 값을 테스트하며 다음 사항을 확인하세요.

• 원하는 상태 전환이 일어나는지

• 같은 입력을 반복해도 애니메이션이 잘못된 상태에 머물지 않는지

• 초기화하면 예상한 초기 상태로 돌아가는지

• 포인터 또는 이벤트 기반 동작이 제품 인터랙션과 일치하는지

앱에 연결하기

생성된 dotLottie 런타임 코드를 바탕으로 애플리케이션 상태나 UI 이벤트를 상태 머신 입력에 연결하세요. Utilities에서는 State Machine 인터랙션 스니펫도 제공합니다.

깨지기 쉬운 문자열 리터럴 대신 타입이 있는 값을 사용하려면 TypeScript 상태 머신 ID를 생성하세요. 애니메이션 유효성 검사 및 타입 생성을 참고하세요.

문제 해결

• 상태 머신이 보이지 않음 - JSON으로 내보낸 파일이 아니라 원본 .lottie인지 확인하세요.

• 입력해도 반응하지 않음 - 먼저 상태 머신을 시작하고 입력 이름과 타입이 맞는지 확인하세요.

• 미리 보기와 앱의 동작이 다름 - 두 환경에서 호환되는 dotLottie 런타임과 같은 버전의 파일을 사용하는지 확인하세요.

• 팔레트 컨트롤을 사용할 수 없음 - 일부 미리 보기에서는 색상 변경과 실행 중인 상태 머신 재생을 동시에 지원하지 않습니다.