【Rive】Flutterで超簡単にアニメーションを実装する

# はじめに
モバイルアプリを作成するうえでアニメーションはUI/UXの点でコスパが良いです。

https://qiita.com/watanabe_yudai/items/46e4770a38ff515cc1d7


しかしFlutterでアニメーション作成したいとき、コードで書くとかなり大変になってしまいます...

そこで誰でも簡単につくれるツールがあります！ツールはいくつかあるらしいですが、主流なのがLottieかRiveというツールです。以下それぞれの特徴を説明します。

# 各ツールの紹介
### Lottie

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/92988daa-77f2-0141-d4be-1d0c12b20ad4.png">

Android、iOS、Web、Windows用アニメーションライブラリで、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、モバイルおよびWeb上でアニメーションをレンダリングできます。

Lottieの特長としては、これまで複雑だったアニメーションの実装が手軽にでき、動画などのmovファイルやGIFアニメーションに比べてファイルサイズも格段に軽量、SVGをつかっているので拡大縮小も自由自在という点です。
 

### Rive（らいぶ）

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/602c21be-028b-4a6d-a919-ea92d43e7286.png">

今回利用するのはこちらです。
Lottieとほぼ同じです。

# Lottie vs Rive
大きな違いはありませんが、Riveでは無料プランでも問題なくアニメーション作成が可能で、これが個人開発を行う場合にRiveが扱いやすいと感じました。

Flutterの実装においては、Riveはコード側でshapeの色を変更できるため、色別にアニメーションファイルを管理する必要がないという点が大きな利点となります。

エディターの使いやすさやコミュニティに上がっているアニメーションの数などはLottieが良さそうです。

:::note info
[RiveがLottieに喧嘩を売っている公式ページ](https://rive.app/blog/rive-as-a-lottie-alternative)をみてみるとRiveはLottieよりファイルが小さく、高速で、必要なメモリも少ないらしいです。
:::

# Riveのはじめかた

使い方等を説明している記事はたくさんあるのではじめかただけ書いていきます。
1. 公式ページに行きます：https://rive.app/
   <img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/5f088e1b-0088-569e-576e-a8a2c30bc3e5.png">

2. ねこの攻撃に気をつけながらGet Staetedしてください（かわいい）。
![5d64ab11-4dcb-4aad-82d0-1df6d652355c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/35503f4a-e762-7fd9-5ad5-bb6969e46749.png)

3. 新しいfileを作成します
   a. ※無料プランは3つまでしか作成できません！
    ![4adc80fd-4ed1-4417-a611-9cc5be75c0c2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/7642b1c8-c597-42ff-0ed9-b357f3853203.png)

4. 作成したfileを開きます。
   a. 使い方は[WebアニメーションはRiveが便利！](https://zenn.dev/shota1995m/articles/shota1995m-rive-app)がわかりやすかったです。
   b. Rive公式が出してるチュートリアル動画[State Machine in Rive](https://www.youtube.com/watch?v=r17OBczdK4c&list=RDCMUCPal2R1FxwRTPylhP_7ofEg&start_radio=1&rv=r17OBczdK4c&t=1&ab_channel=Rive)もおすすめです。
   <img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/9bea4f82-b5eb-05f8-443c-3fa7ec002979.png">

5. あとは作るだけです！が、私にはアニメーションの知識がないのでコミュニティから参考にするアニメーションを取ってきます。

# Riveのコミュニティ
Riveユーザーがコミュニティに公開しているのもがいっぱいあるので参考になります。
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/6d1154b1-7b5c-89a2-d275-4dacdbda1e35.png">


お気に入りの作品があったらそのプレビューをエディターで開けますし、編集もできます。
（編集は無料会員は1のファイルしかできません）

編集を行う場合はRemixを選択してください。
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/e7a2968e-bd83-5766-841d-9fece38c372f.png">

### ライセンスについて
[CC BYライセンス](https://creativecommons.org/licenses/by/4.0/)に基いているため、変更を加える作品の作者名、ライセンスリンク、変更を行ったことを示せば、コミュニティに公開されている作品も編集して、商用利用もOKでした。
詳細はこちら：[Community Overview](https://help.rive.app/community/overview) 


次にコミュニティで見つけたアニメーションをFlutterで動かしてみましょう。

# Flutter実装
作成したアニメーションをFlutterに適用する方法を説明します。
今回はベルのアニメーションを反映させます。

1. コミュニティでbellと検索したら良さそうなのがありましたのでRemixを選択
   <img width="450" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/b712f8f2-fb89-d097-d976-5a9c4af29a22.png">

1. 次に編集、作成したアニメーションをダウンロードします。
   <img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/43ab6ea9-6629-6823-80e4-9736956908b0.png">
   
2. 次にダウンロードしたrivファイル（今回はbell_notification.riv）をFlutterの任意の場所(例：assets/animations)に入れます。

3. Flutterに適用するために公式からでているpackageをインストールします。
[rive | Flutter package](https://pub.dev/packages/rive)


4. 以下のドキュメントに沿ってコードを書きます。
[rive - Dart API docs](https://pub.dev/documentation/rive/latest/) 

### Flutter実装例
今回はRiveAnimationクラスに"bell_notification.riv"の場所を指定してあげて、animationsプロパティにベルをプルプルさせるアニメーションを指定しています。



```dart
// SizedBoxの中にアニメーションを入れる
const SizedBox(
    height: 30,
    width: 30,
    child: RiveAnimation.asset(
        'assets/animations/check_animation.riv',
        animations: ['アニメーションの動作をここに入れる'],
    ),
),
```

このanimationプロパティに何をいれてあげればいいのかというと、
   <img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/1712ab9b-1341-ce5b-9359-1376c224a429.png">

右上をAnimateに切り替え、Riveエディターで作成した左下のAnimationsの部分になります。Riveではタイムラインと呼ばれています。
1つのプロジェクトに対して複数のアニメーション（タイムライン）を作成することができ、それをanimationsプロパティで使う部分を選択し、コントローラーで制御することが可能です。

今回は"Active"というプルプルさせるアニメーションを指定してあげます。

すると...
![bell.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3335560/ee971b5a-070e-d85b-2bb0-db0adf12ae86.gif)
ベルをプルプルさせることができました！

# さいごに
今回は一つのアニメーションを動かしましたが、ドキュメント見るとStateMachineで条件によって複数のアニメーションパターンを制御できるなど、いろいろなことできます。
[公式のサンプルコードたち](https://github.com/rive-app/rive-flutter/tree/master/example/lib)

皆さんもユーザーに飽きさせず、かつコスパよくユーザーの目線を誘導できるアニメーションを実装してみましょう！（使いすぎ注意です）