🙋🏻‍♂️ 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/