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

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

🎯 기본 로직

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

🎁 riv 내보내기 시 주의사항

자체 글꼴로 교체하여 riv 파일 크기를 줄이려면 다음 설정에 유의하세요: 해당 글꼴을 찾고 내보내기 설정에서 '사용된 글리프'를 선택합니다—이렇게 하면 사용된 문자만 내보내져 riv 파일 크기를 크게 줄일 수 있습니다.

🥳 Rive 파일 사용 요점

✍🏼 Rive 초기화 설정

stateMachines: "main" autoBind: true (기타 설정은 설정하지 않거나 기본값 사용)

💥 데이터 필드 바인딩

• isHover 불리언 타입: 버튼 위에 마우스가 호버되면 true로 설정, 호버하지 않을 때는 false.
• isClicked 불리언 타입: 버튼 클릭 후 값이 true로 설정, 클릭 전에는 false.
• progressNum 숫자 타입: 진행률 변화 수치 제어, 범위는 0-100으로 설정; 값이 100에 도달하면 버튼이 자동으로 다음 상태로 변화.
• endTextTrigger 트리거 타입: 버튼의 최종 상태 텍스트가 클릭될 때마다 한 번 트리거.

🚀 고급 기술과 공식 리소스

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