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

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

🎯 기본 로직

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

🎁 riv 내보내기 시 주의사항

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

🥳 Rive 파일 사용 요점

✍🏼 Rive 초기화 설정

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

💥 데이터 필드 바인딩

• isHovered 부울 타입: 버튼 위에 마우스를 올리면 true로 설정, 올리지 않을 때는 false.
• isClicked 부울 타입: 버튼이 클릭된 후 값이 true로 설정, 클릭 전에는 false.
• progress 숫자 타입: 진행률 변화 값 제어에 사용, 범위는 0-100 설정, 값이 100에 도달하면 버튼이 자동으로 다음 상태로 변화.

🚀 고급 기술 및 공식 리소스

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