Riveで作ったアニメーションをスマホアプリで操作してみる

前回Riveを使って描いた絵をアニメーション化しました

今回はそれをスマホアプリで動かしたいと思います

前回やったこと
今回やったこと
1. Riveの設定
2. Flutterでコーディングする
実行結果
あとがき

前回やったこと

svg画像をRiveで動かせるようにしました

今回やったこと

Riveの設定

３つのアニメーションを作りました

葉っぱアニメーション

葉っぱが動くアニメーションです

くち

口がパクパク動くアニメーションです

ほっぺ

ほっぺが回っています。このアニメーションはループを設定しています

Riveファイルのダウンロード

RIveのメニューバーからDownload -> For newest Runtime(v7)を押してapple.rivをダウンロードします

Flutterでコーディングする

assets/apple.riv

assetsディレクトリを作り、ダウンロードしたapple.rivを配置します

pubspect.yaml

assetsを読み込めるように設定を書きます

flutter:
  assets:
    - apple.riv

main.dart

OneShotAnimationクラスを使って口と葉っぱを動かすアニメーションを設定します

RiveAnimation.assetでローカルのファイルからriveファイルを読み込み、

ほっぺを動かすアニメーションを起動時に実行しています

アニメーションの名前はRiveで設定した「くち」、「葉っぱアニメーション」、「ほっぺ」を指定しています

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(MaterialApp(home: PlayOneShotAnimation()));
}

class PlayOneShotAnimation extends StatefulWidget {
  @override
  _PlayOneShotAnimationState createState() => _PlayOneShotAnimationState();
}

class _PlayOneShotAnimationState extends State<PlayOneShotAnimation> {
  RiveAnimationController _mouseController;
  RiveAnimationController _leafController;
  bool _isPlayingMouse = false;
  bool _isPlayingLeaf = false;

  @override
  void initState() {
    super.initState();
    _mouseController = OneShotAnimation(
      'くち',
      autoplay: false,
      onStop: () => setState(() => _isPlayingMouse = false),
      onStart: () => setState(() => _isPlayingMouse = true),
    );
    _leafController = OneShotAnimation(
      '葉っぱアニメーション',
      autoplay: false,
      onStop: () => setState(() => _isPlayingLeaf = false),
      onStart: () => setState(() => _isPlayingLeaf = true),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('りんごを動かす'),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              width: 400,
              height: 400,
              child: RiveAnimation.asset(
                'assets/apple.riv',
                animations: const ['ほっぺ'],
                controllers: [_mouseController,_leafController],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _isPlayingMouse ? null : _mouseController.isActive = true;
                  },
                  child: Text("口を動かす"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _isPlayingLeaf ? null : _leafController.isActive = true;
                  },
                  child: Text("葉っぱを動かす"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}