【Flutter】Flutter × RIVE로 애니메이션 대응

완성판은 이쪽

Shake 버튼으로 난수 생성 기능에 애니메이션을 붙여 보았습니다.
htps : // 기주 b. 코 m / 테츠키 ck / 사과 lf
App Store는 여기
Google Play 스토어는 여기

RIVE란?

Rive (구 2Dimensions)이 개발하는 브라우저 기반 벡터 2D 애니메이션 제작 도구로 디자이너가 디자인 자산을 사용하여 직접 앱과 게임용 애니메이션을 만드는 것을 목표로 합니다. 2018년 12월에 공개되었으며 기본 기능은 무료로 사용할 수 있습니다. (파일을 비공개로 하고 싶을 때는 유료 플랜)

RIVE 데이터는 이쪽

RIVE에서 애니메이션 만들기

먼저 RIVE로 계정을 만드세요.

그런 다음 아래 이미지와 같이 오른쪽 상단의 New File를 선택하십시오.



화면 왼쪽 하단의 import에서 이미지를 가져옵니다.



애니메이션 탭을 열고 화면 아래의 지정된 시간에 이미지의 크기를 변경하거나 위치를 변경합니다.




만든 애니메이션에 이름을 지정합니다. 나중에 소스 코드 내에서 사용합니다.


파일 내보내기

소스 코드에 추가

패키지 설치
공식은 이쪽

dependencies:
 flutter:
   sdk: flutter
 flare_flutter: ^2.0.3

방금 전, 내보낸 파일을 assets 아래에 배치. (배치 장소는 어디서나)

제 경우에는 다음과 같은 Widget을 생성하는 메소드에 기재하고 있습니다.
※animation의 인수에 RIVE상에서 명명한 애니메이션의 이름을 붙여 주세요.

Widget _createAnimationGolfBallView({int num, double height, double width}) {
    return Container(
      height: height,
      width: width,
      child: Stack(
        children: <Widget>[
          FlareActor(
            'assets/golf_ball_rotate.flr',
            animation: 'start',
            alignment: Alignment.center,
            controller: golfBallAnimationController,
            fit: BoxFit.fill,
          ),
          Center(
            child: Text(
              num.toString(),
              style: TextStyle(fontSize: height / 2),
            ),
          ),
        ],
      ),
    );
  }

애니메이션 재생

//コントローラを宣言
final FlareControls golfBallAnimationController = FlareControls();

...

//以下をボタンタップ時に追記
golfBallAnimationController.play('start');

참고 사이트

Rive(구 Flare)로 만드는 Flutter 애니메이션