インタラクティブアニメーションツール「Rive」を使ってみよう（前編）

UIデザインにインタラクティブなアニメーションを取り入れたいけど、どこから始めればいいのか分からない...。そんな悩みを抱える方も多いのではないでしょうか。Riveは、ビジュアルデザインからアニメーションまで1つのツールで作成できるほか、ユーザーのカーソル移動などの入力操作にデザインを反応させたり、インタラクティブなコンテンツに仕上げたりすることができるツールです。

そこで本記事では、動きのスケッチからWebサイトへの実装まで、UIにアニメーションを取り込む際に必要な作成フローを紹介します。この記事を読むことで、Riveを使ったインタラクティブコンテンツの制作方法が学べます。なお、前編ではビジュアルデザインを作成し、Riveエディターでアニメーションを作成します。そして、アニメーションをカーソルに追従するインタラクションに対応させるまでを実践していきます。
※後編は1月22日（木）公開予定です

目次

動きをイメージしてからビジュアルデザインを作成する

今回は、Riveのコミュニティサイトを題材に、アニメーションを取り込んでより遊び心に溢れたWebサイトに改善してみましょう。コンテンツをより楽しんでもらうためには、ヘッダーの「Join」ボタンを押してアカウント登録してもらう必要があり、このボタンに少しユーザーの注意を引くアイデアが必要です。

 というわけで、「Join」ボタンに命を宿し、客寄せをしてもらうことにします。名付けてJoin君です。

ボタンのJoin君というキャラクターを設定動きのイメージとしては以下の通りです。

・カーソルがボタン付近に近づいたら、カーソルの移動に目が追いかける
・カーソルがボタン付近に近づいたら、手を振って挨拶してくれる
・かわいらしく「まばたき」をする

それでは制作物が決まったので、早速ビジュアルデザインに着手します。 今回は、Rive上のDesign Mode（Figmaと同様の操作性でデザインを作成できる）で作成してみました。レイヤー構造は以下のように設定します。

レイヤーは4階層に設定お手元で実際にやってみる場合は、レイヤー構造を真似してみてください。特に、上記画像に青字で書いている箇所を真似していただくと記事の通りに実践できます。まぶたや手はアニメーションの状態によって表示／非表示を切り替えるため、今は表示したままにしておいて問題ありません。

また、今回の用途ではあまり活用できていませんが、腕の部分にBoneを設定することで、新しいアニメーションを作成する時に表現を作り込むことも可能です。

FigmaやIllustratorでデザインを作成する場合は、作成したベクターをSVGで書き出してRiveにドラッグ＆ドロップすると取り込めます。

ビジュアルデザインからアニメーションを作成する

インスペクターの上部分にある「Animate」タブをクリックしてAnimate Modeに切り替えます。Animate Modeでは、レイヤーのサイズなどの設定値を時間に対して指定するTimelineを使ってアニメーションを作成します。

右上のタブからAnimate Modeに変更それではTimelineを作成します。プラスを押して表示されるメニューからTimelineを選択し、新しく作成したTimelineを「Blinking」に名前を変更しておきます。

新しくTimelineが追加されたら「Blinking」に名前を変更次にキーフレームを入力します。ツールバーのHierarcyからレイヤー「L eyelid」を選択した状態にします。

10フレームごとにまぶたの表示／非表示を切り替える今回は10フレームごとにまぶたの表示／非表示を切り替えてみましょう。 青色の逆三角形の再生ヘッドを移動させて0フレームに合わせた状態で、インスペクターからレイヤーの透明度を0%に入力すると、デザイン側の表示も連動します。デザインの状態を変更したい時間まで再生ヘッドを移動させて、インスペクタで値を変更してキーフレームを作成して...という流れ繰り返してアニメーションを作成します。「R eyelid」も同じ手順で作成しましょう。

私の場合、「Blinking」アニメーションは5秒間で、順番に0%、0%、100%、100%、0%、0%、100% ... と指定することでまばたきのアニメーションを作成しました。同じ値が2連続している箇所は、透明度の変化に要する時間を1フレームにするためです。0%、100%、0% ... とすると、まぶたの表示切り替えがゆっくりになり、半透明のまぶたが見える瞬間が発生してしまいます。 また、まばたきのみのアニメーション時は、腕の表示は不要なので、0フレームに腕の透明度を0%にしています。

armの角度変更をキーフレームで指定同様に手を振るアニメーション「Waving」も作成して、アニメーションの作成は完了です。レイヤーのorigin（原点）を腕の付け根に設定し、Rotationを変更すれば、簡単に腕振りが実現できます。こちらは腕の表示が必要なので、0フレームで腕の透明度を100%にしています。

State Machineを利用してカーソルに追従させる

Riveの真価が発揮されるのは、このインタラクティブな要素を追加する段階です。いよいよ作成したデザインをインタラクティブにしていくために、State Machineを利用します。ユーザーのアクションを検知して状態変更をしたり、アニメーション間の遷移を構築できます。

EntryにBlinkingを接続するデフォルトで存在する基本的な遷移を制御するステートであるEntryに接続するステートは、アプリで最初に表示して再生できます。繋がっていない場合は、Entryステート付近にカーソルを移動すると、小さな円が表示されるので、その状態でドラッグして「Blinking」アニメーションを繋いでおきましょう。

Listenersから検知するアクションの種類と対象領域を設定するユーザーのアクションを検知するために、Listenersから検知するアクションの種類と対象領域を設定します。まずは、ユーザーのアクションを受け付けるTargetを設定します。

アートボードと同じサイズの円を配置してヒットエリアを設定 今回は、カーソルがボタン付近に近づいた時にトリガーさせたいので、Join君の中央を基点にアートボードと同じサイズの円を配置し、ヒットエリアとして設定しました。ヒットエリアには見た目が不要なため、透明にしています。

検知するユーザーの操作を選択 Align Targetを選択したらリスナーアクションを追加される続いて、カーソルの動きを追従させるために、アクションの種類としてPointer Moveを選択します。ヒットエリアにカーソルが侵入した時に、実行するリスナーアクションを設定します。「L pupil follow」を選択して、画面下の方にある＋ボタンをクリックして、カーソルの位置に追従させるアクションであるAlign Targetを選択。 リスナーアクションとして初期設定されているものは消しておきます。

L(R) pupilをグループ化したらTargetを指定ここで「L pupil」「R pupil」レイヤーに少し下準備として、それぞれ個別にグループに入れておきます。先ほどの「L pupil follow」のリスナーアクションにあるalignには、このグループをTargetとして選択します。今はヒットエリアにカーソルが侵入すると黒目がカーソルに付いて来ますが、この後調整するので問題ありません。

白目の範囲で黒目が移動する設定していく「L pupil group」「R pupil group」に対して、白目の範囲で黒目が移動する設定をしていきます。グループを選択している状態でインスペクターにある Constraits の＋ボタンをクリックし、Distanceを選択。Distanceの左にある設定アイコンをクリックしたら、Targetに「L white of the eye」を選択。これは「L pupil」レイヤーが移動できる領域はどこを基点とするのかを指定しています。 次に「L pupil」が具体的にどの範囲で動き回れるのかを、Distanceから数値入力して制約を決めます。Targetに指定した レイヤーの中心から＋何pxの範囲で動くことができるのかを指定して、黒目が白目の範囲で移動する様に数値を調整していきます。 

これで目が動き回る範囲を指定できました。

まとめ

前編では、用意したデザインでアニメーションの作成、目のカーソル追従まで実践しました。アニメーション作成に馴染みある方なら使いやすいUIではありますが、一方でエンジニアリング視点でデータの造りを検討したり、アニメーションとのインタラクションの検討が必要になってきます。

Lottie + After Effectsのような従来の環境で制作をされてきた方は、少し発想の仕方を切り替えないといけないのですが、少し難しい分、Riveは豊かな表現力を実現できるツールです。是非、本記事での理解を通して、みなさんの業務に取り入れていただけたら幸いです。

後編では、ユーザーの操作を検知してアニメーションの状態遷移させる設定を作りアニメーションを完成させて、実際にWebサイトに表示するまでを実践していきます。