Riveでマイクロインタラクションを実現する

## この記事の概要

Riveというアニメーション作成ツールがあります。

https://rive.app/

自動再生で無限ループするアニメーションの作り方はいくつか記事があったのですが、ユーザーの操作にあわせて発火するアニメーションは見かけませんでした。
というわけで記事にします。

## 完成品

Qiitaのいいねボタンのアニメーションの簡略化バージョンを作りました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/8caaf457-9dc0-9ef3-7eb1-3d75f5601115.gif)

## アカウント作成

サイトにアクセスしたら、画面右上の`Get Started`をクリックします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/29101e44-2c15-e320-c4ff-438beaf2b44a.png)

一般的なサインアップフォームがあるので、お好きなもので登録してください。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/f4026c0c-d089-70b2-4648-2ea3bcb63d01.png)

## アニメーションファイル作成

ナビゲーションより`Drafts`を選択し、画面右上の`New file`をクリックします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c9466b6d-6815-c9e8-6d86-1d7cdf7605cc.png)

テンプレート選択のためのウィンドウが出てくるので、`Blank artboard`を選びます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d430d76f-3aae-c8da-c1b8-908f0e4805c8.png)

何もない画面が表示されるので、ここからアニメーションを作成します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/6f74f906-8680-795f-ce49-7b0aa1420b3d.png)

図形ツールやペンツールで静止画を作ります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c6bc75dd-e949-5356-a99f-a6493bcfef17.png)

画面右上から`Animate`タブへ切り替えて、画面左下の`Animations`ペインから`Animation`を選び、アニメーションを作ります。
一般的なアニメーションツールと同様、キーフレームを打って要素の位置やサイズや色を変えます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/93f1b932-3479-8817-4d3e-8d140c3a465a.png)

`Inputs`タブの`+`ボタンをクリックし、`Boolean`をクリックします。
ここでは`Pressed`と名前をつけました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/39e41f4c-685d-df26-0013-3d9361394a08.png)

`State machine`（スクリーンショット内では`Animations`ペインにある`State`と書いてあるもの）をクリックします。
`Layer`から`Entry`と`Timeline 1`の間のシェブロンをクリックし、右側の`Conditions`から先程作成した`Pressed`を選択します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/57117a8b-c4f4-d4d3-2b49-8660acb94c23.png)

この状態で`Layer`の横にある再生ボタンを押し、`Inputs`の`Pressed`にチェックを入れるとアニメーションが再生されます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/a5333f0b-6c7b-14ad-258f-5cf6ae591661.gif)

次に`Listers`の`+`ボタンをクリックし、動かしたい要素の名前（スクリーンショット内では`Group`を選択します。
`Group`をクリックすると右側にセレクトボックスがいくつか出てくるので、`Pointer Down`と`Pressed`に`true`をsetします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/70d0dcaa-a513-8e05-07bf-a2d03ee485a7.png)

ここまで来たら、画面上部のツールバーより`Download`を選んで`For newest runtime`をクリックし、ダウンロードします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/f51ef5cd-3a59-bea1-0ef4-034aae8e9829.png)

## コード設定

このような構成のプロジェクトを作りました。
`like.riv`は先程ダウンロードしたファイルです。
`style.css`は、アニメーションをセンターにレイアウトするためだけに用意したものです。

```
.
├── index.html
├── like.riv
└── style.css
```

HTMLは以下のようになっています。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My first Rive</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script src="https://unpkg.com/@rive-app/canvas@1.0.79"></script>
    <script>
      new rive.Rive({
        src: "./like.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "State",
      });
    </script>
  </body>
</html>
```

`canvas`を用いて描画するので、HTML側に用意します。

```html:index.html
    <canvas id="canvas" width="500" height="500"></canvas>
```

サンプルなので簡単にunpkgから引っ張ってきました。
npmなどでインストールしてももちろんOKです。

```html:index.html
    <script src="https://unpkg.com/@rive-app/canvas@1.0.79"></script>
```

`src`と`canvas`は、それぞれの要素を指定しているだけです。
クリックしてアニメーションする要素ですが、`autoplay`は`true`であっています。
（falseだと、後述する`stateMachines`を指定してもその中の動きが反映されません。）
`stateMachines`は、自分が作ったステートマシン（`Layer`の中でノードを繋いでいたもの）の名前を記載します。

```html:index.html
    <script>
      new rive.Rive({
        src: "./like.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "State",
      });
    </script>
```

これにより、冒頭に載せたようにクリックするとアニメーションする要素が完成しました。
gifを再掲します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/eca8fbd0-f12b-75cd-6fe8-8e3059bdf471.gif)

## 最後に

何かしらのアニメーションソフトを使ったことがある人なら簡単に触れるUIですし、コードの設定も特に難しくありませんでした。

今回ダウンロードした`.riv`ファイルも507bytesしかなく、かなり軽いです。
もっと複雑なアニメーションだと分かりませんが、[コミュニティ](https://rive.app/community/)にあるファイルをいくつか見た感じ、Lottieから書き出されるjsonよりも軽そうでした。

今後結構使える気がします。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox

Devトークでのお話してくださる方も募集中です！

https://jobs.qiita.com/employers/qiita-inc/dev_talks/489