Rive란?

Rive

Rive는 풍부하고 세련된 애니메이션과 움직임을 다양한 플랫폼에 사용할 수 있도록 한 웹 서비스입니다.
Rive의 편집기에서 애니메이션을 만들고 애니메이션을 실제 앱에 쉽게 통합할 수 있습니다.

이번은, 주로 Flutter에서의 애니메이션의 구현의 부분에 포커스 해 이야기를 진행합니다만, 애니메이션 자체의 만드는 방법등은 공식의 사이트가 몹시 참고가 된다고 생각합니다

Rive 리소스
Tutorial

구현

패키지 설치

rive 설치

pubspec.yaml

dependencies:
  rive: ^0.6.7

Assets에 추가

htps : ///리ょぇ. 아 p/콧물에 ty/
커뮤니티에 다양한 애니메이션이 이미 있으므로 여기에서 다운로드하여 바로 사용할 수 있습니다.


오른쪽의 "Download"를 클릭하면 .riv 파일이 다운로드됩니다.

다운로드가 완료되면 프로젝트로 돌아가서 프로젝트 바로 아래에 assets 디렉토리를 만듭니다.
그런 다음 〇〇.riv를 assets 폴더 바로 아래에 놓습니다.
pubspec.yaml 에 추가한 에셋 경로 추가.

pubspec.yaml

assets:
  - assets/love_note_4.riv

애니메이션 시작

실제로 애니메이션을 표시시키는 부분을 구현합니다.
우선, 변수를 정의

main.dart

Artboard _artboard;
RiveAnimationController _controller;

그런 다음 initState에 다음 코드를 추가하십시오.

main.dart

rootBundle.load('assets/love_note_4.riv').then(
  (data) async {
    final file = RiveFile();

    if (file.import(data)) {
      final artboard = file.mainArtboard;
      artboard.addController(_controller = SimpleAnimation('note'));
      setState(() => _artboard = artboard);
    }
  },
);

하고 있는 처리로서는, 에셋의 .riv 파일을 읽어들여, 그것을 RiveFile 오브젝트로서 작성.
또한 동시에 RiveAnimationController를 상속받은 SimpleAnimation('note')를 artboard에 추가했습니다.SimpleAnimation 의 인수는 .riv 파일을 라이브 편집기에서 열 때 애니메이션 이름을 전달합니다.
(아래 스쿠쇼의 빨간색 테두리 부분이 애니메이션 이름)



그리고 원하는 곳에 Rive(artboard) 추가

main.dart

Rive(artboard: _artboard)

덤.

이 애니메이션을 도중에 정지하고 싶은 경우는 _controller 의 isActive 를 명령적으로 false 로 하면 된다.
예를 들어 ,,

main.dart

void _togglePlay() {
  setState(() {
    _controller.isActive = !_controller.isActive;
  });
}

이것을 어떠한 onTap 이나 onPressed 에 건네준다.

끝에

Flutter로 좋은 느낌의 로딩용 애니메이션 없을까~라고 찾고 있었는데, 이것을 발견해 여러가지 만져 보았는데 꽤 좋은 느낌이었으므로 소개시켜 주었습니다.

전체의 코드나 최초의 GIF로 싣고 있는 코드는 GitHub상에 올리고 있으므로, 좋아하게 봐 주세요!
htps : // 기주 b. 코 m / 쇼타로 427 / 리즈 ぇ - mp ぇ