🙋🏻‍♂️ Rive 파일 사용 방법

Rive 에디터로 가져와 자유롭게 편집하고, 필요에 따라 수정하여 RIV 파일을 내보내 사용합니다.

🎯 기본 로직

상태 머신 미리보기 시작 후, 클릭 변화 효과 구현; 진행률 제어 시, 바인딩된 상태 데이터 값을 수동 조정하여 진행률 제어 미리보기 구현; 해당 진행률 값이 100에 도달하면 자동으로 상태를 전환하여 변화합니다.

🎁 RIV 내보내기 시 주의사항

글꼴을 교체하여 RIV 파일 크기를 줄이려면 다음 설정에 유의하세요:

해당 글꼴을 찾고, 내보내기 설정 시 "사용된 글리프"를 선택합니다—이렇게 하면 사용된 문자만 내보내져 RIV 파일 크기를 크게 줄일 수 있습니다.

🥳 Rive 파일 사용 요점

✍🏼 Rive 초기화 설정

stateMachines: "main" autoBind: true (기타 설정은 미설정 또는 기본값 사용 가능)

💥 데이터 필드 바인딩

• isHover 불리언 타입: 마우스가 버튼 위에 호버되면 true로 설정, 그렇지 않으면 false.
• isClicked 불리언 타입: 버튼 클릭 후 값이 true로 설정, 클릭 전에는 false.
• progressNum 숫자 타입: 진행률 변화 값 제어, 범위 0-100; 값이 100에 도달하면 버튼이 자동으로 다음 상태로 변화.

🚀 고급 기술과 공식 리소스

• 본 사례의 상태 머신과 필드 설명을 AI에 제공하여 해당 런타임 초기화 및 상호작용 코드 템플릿 생성 후, 프로젝트 구조에 따라 조정.
• 바인딩이 무효한 경우, 먼저 stateMachines 이름, 필드 명명, 타입 일관성 확인.
• 공식 런타임 문서: https://rive.app/docs/runtimes/