【Flutter】Riveアニメーションを使って猫の目にカーソルを追わせてみた

はじめに

Flutterの海外のYouTubeを見ていたら面白いアニメーションライブラリが流れてきたので、真似して実装してみました。

今回作るもの

猫の目がカーソル（指？）を追いかけるようなアニメーションです。

開発環境

• Flutter: 3.14.0
• Dart: 3.2.0
• rive: 0.12.4

1. riveのダウンロード

riveファイルをダウンロードし、します。
私はこちらのサイトからダウンロードしました。

〜ダウンロード手順〜

2. riveファイルをassetsディレクトリに移動し、pubspec.yamlに追加する

① assetsディレクトリを作成し、ダウンロードしたriveファイルを挿入します。
② pubspec.yamlにassets/cat.rivを追記します。

3. riveライブラリの追加

以下のコマンドを実行するか、手動でpubspec.yamlに指定のバージョンを追記してください。
flutter pub add rive

4. コード

アニメーションを入れたい部分に以下のコードを追加してください。

クラス内

 StateMachineController? controller;

Widget内

      body: Container(
        width: double.infinity,
        child: RiveAnimation.asset(
          'assets/cat.riv',
          fit: BoxFit.fitHeight,
          stateMachines: const ['state'],
          onInit: ((artboard) {
            controller = StateMachineController.fromArtboard(
                artboard, 'State Machine 1');
            if (controller == null) return;
            artboard.addController(controller!);
          }),
        ),
      ),

以上で完成となります。
githubにコード全文を載せているので全て見たい場合はこちらをご覧ください。

最後に

遊び心でアニメーションを動かしましたが、楽しいですね！これからも色々触っていこうと思います。