Rive 만들기

Flutter의 Rive라이브러리를 사용하려면 .riv형식의 파일이 필요하다.

이것을 만들어주는 곳이 https://rive.app/ rive이다.

내가 만들어보았지만 차라리 다른 능력자분들이 만들어놓을 것을 쓰는게 훨씬 정신건강에 이로울것 같다..
(필요한 .riv를 rive.app 홈페이지에서 Community에서 검색하면 된다.)

---

만들때 필요한 것

1. svg 이미지 파일 

2. 최대 시간 초 설정

3. 시간 초를 나누어 이미지의 위치, Rotation 설정

4. Download

1. 자신이 원하는 크기의 사이즈 설정

( 에뮬레이터의 휴대폰 사이즈를 입력했다)

 

2. svg파일을 assets에 추가

3. 우측 상단의 Animate -> Timeline -> Duration를 자신이 필요한 애니메이션초 만큼 설정

5초로 되어있지만 이후 6초로 바꿈.

4. 하단에 bar가 있는데 기본적으로 10f가 잡혀있지만 이것을 최대까지 늘려준다.(좀 더 자세한 설정을 위함)

이 bar의 역할은 초 단위 이다.

 

5. 0초 일 때 공 위치

- 공의 위치는 마우스로 직접 움직여주면 된다.

- Rotation 또한 마우스로 움직여도 되지만 우측 상단에 입력 해주는것이 좀 더 좋았다.

- 0 ~ 6초 까지 총 2초씩 나누어서 진행 해주었다. 

 

6. 2초일 때 공의 위치 및 Rotaion으로 공이 어떻게 굴러갈지(?) 효과 설정

7. 4초일때 설정

8. 마지막 6초는 0초를 복사해서 그대로 붙혀주기. (기본 상태로 돌아가기 위함)

9. Animate 실행 (처음이라 역시 쉽지않다..)

10. 마지막으로 Download -> For runtime을 눌러주면 .riv파일이 생성된다.