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

この記事の概要

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

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

完成品

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

アカウント作成

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

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

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

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

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

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

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

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

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

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

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

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

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

コード設定

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

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

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側に用意します。

index.html

    <canvas id="canvas" width="500" height="500"></canvas>

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

index.html

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

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

index.html

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

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

最後に

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

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

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

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

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