Zenn
Open14

【Rive2】トラッキングサンプル用の目玉アニメーションを作る

rive2
ずみこうずみこう

構成要素を考える

とりあえず、以下のような分け方で作っていきます🐢

パーツ🦿

  • 白目（結膜）
  • 黒目（角膜）
    • 虹彩
    • 瞳孔
    • 反射光
  • 目の周りの飾り（任意）

アニメーション👀

  • Idle
    待機状態。上下に揺れたり まばたき したり。
  • Vertical
    縦方向の視線の動き。
  • Horizontal
    横方向の視線の動き。
  • Scaling
    瞳孔の拡大/縮小。
ずみこうずみこう

とりあえず目玉を作成するところから

基本的にShape > Ellipseを並べていくだけなので、楽ちんですね！

1. 新規ファイル作成とアートボードの追加

  • ファイル名をeyeに変更

2. 白目を配置

  • Conjunctivaにリネーム
  • 立体感を出す為に斜めにグラデーションかけてみます🌈

3. 虹彩を配置

  • Irisにリネーム
  • こちらもグラデーションを🌈
    ※白目とは反対に左下を明るくするのがポイント。恐らく👀

4. 瞳孔を配置

  • Pupilにリネーム
  • 色を黒へ変更する

5. 反射光を配置

  • ReflectedLightにリネーム
  • 色を白へ変更する

6. 完成👀

それなりに元ツイートの目玉に似せれたのではないでしょうか。

ずみこうずみこう

アニメーションに入る前に少し整理する

1. EyeグループとCorneaグループを追加して、グループ化しておく

グループに対してアニメーションを設定できるので、複数のパーツをまとめてアニメーションさせたい時、便利です👌

グループ化後

2. 白目から黒目がはみ出さないようにしておく

Clippingという機能ではみ出さないようにできます✂️

Clipping前 Clipping後
はみ出してしまうパーツ（今回はCorneaグループ）を選択後、右側のメニューからClippingの＋をクリックします。
そのまま、はみ出してほしくないパーツ（Conjunctiva）をクリックするとClippingできます。

以下のように表示されていればOK💪

Clipping後のCorneaグループ

3. まぶた忘れてました

まぶたを追加します。
白目と同じサイズのEllipseを追加し、以下をしておきます。

  • Eyelidsへリネーム
  • 色の変更（青緑にしました）
  • Clipping

    まぶた
ずみこうずみこう

アートボードの塗りをなくす

Flutterにはアートボードごと読み込むことになるので、目玉と合わせてアートボードもそのまま表示されます。
目玉のみ表示させたいため、アートボードの塗りをなくしておきます👻

塗り削除前


塗り削除後

ずみこうずみこう

アニメーションさせる🚀

まずは、Animateモードに切り替えましょう

画面右上から切り替え可能で、切り替えるとタイムラインが出てきます⏳

ずみこうずみこう

Idleアニメーション編

Idleアニメーションは常時ループ再生させます。
上下に揺れたり、まばたきしたり👀

1. アニメーションのリネーム

左下のANIMATIONSに、デフォルトでUntitled 1というアニメーションがあると思うので、
こちらをIdleへリネームしておきます。

2. Durationを5秒くらいに変更しておく

デフォルトの1秒の状態で まばたき を繰り返すと、しつこい気がするので5秒くらいにしておきます。
（5秒に1回でも多いかも）

3. 再生方法をLoopに変更する

デフォルトではOne Shotになっているため、一度だけ再生して終了してしまいます。
Loopにすると繰り返し再生してくれます。

4. とりあえず上下に揺らす

まずは、Eyeグループを選択しましょう。
最初と最後のフレームに、初期位置（中心）のy軸のキーフレームを打っておきます。
こうすることで、違和感なくループ再生が可能です🙌

あとは、最初〜最後の間に、Eyeグループを上下に移動させて、好きなようにキーフレームを打っていきましょう👏

5. まばたきさせる

Eyelidsを選択後、2~3回程度ダブルクリックすると、パスを編集できるようになります📈
このパスに対してアニメーションを追加していきます。

パス編集

一旦完全に閉じている状態でキーフレームを打っておきます😴

  • Eyelids最下部の頂点 : y軸Position
  • Eyelids側面の頂点の下に伸びているハンドル : y軸Position、ベジェ

前手順で打ち込んだキーフレームの前後の良きところに合わせて、
最下部頂点・側面下に伸びているハンドルを、まぶたが見えなくなるまで上へ移動させる。
（再生してみると少し微妙ですが、まあヨシッ🐱）

6. 完成

完成です👌

ずみこうずみこう

次のアニメーション作成前に...

まぶたが邪魔

次のアニメーションから黒目の縦/横の動き、瞳孔の拡大/縮小に入っていきますが、
まぶたが邪魔で追加しにくいです🤔

まぶたのデフォルト形状を変更する

まぶたの形状を、まばたきアニメーションで行ったような形状に変更してしまいましょう。
こうしておけば、黒目と瞳孔のアニメーションを追加しやすくなります💪

ずみこうずみこう

Verticalアニメーション編

Verticalアニメーションは、黒目の縦方向の動きです↕️
アニメーションの再生方法はOne Shotで。

1. 新規アニメーションを追加

Animateモードに切り替えて、左下の＋ボタンから新規アニメーションを追加します。
Verticalにリネームしておきましょう。

2. 黒目にキーフレームを🌚

再生方法はOne Shotのまま、Duration等の値も変更の必要なしです。

Flutterで取得する縦方向のドラッグ位置の値は、一番上が0で一番下が1となります。
これに合わせてVerticalアニメーションは上から下へ動くようにキーフレームを打っていきます。

最初のフレーム 最後のフレーム

再生してみましょう👇

Verticalアニメーション

ヨシッ🐱

ずみこうずみこう

Horizontalアニメーション編

Horizontalアニメーションは、黒目の横方向の動きです↔️
アニメーションの再生方法はOne Shotで。

1. 新規アニメーションを追加

Animateモードに切り替えて、左下の＋ボタンから新規アニメーションを追加します。
Horizontalにリネームしておきましょう。

2. 黒目にキーフレームを🌚

再生方法はOne Shotのまま、Duration等の値も変更の必要なしです。

Flutterで取得する横方向のドラッグ位置の値は、一番左が0で一番右が1となります。
これに合わせてHorizontalアニメーションは左から右へ動くようにキーフレームを打っていきます。

最初のフレーム 最後のフレーム

再生してみましょう👇

Horizontalアニメーション

ヨシッヨシッ🐱

ずみこうずみこう

Scalingアニメーション編

Scalingアニメーションは、瞳孔の拡大/縮小の動きです📐
アニメーションの再生方法はOne Shotで。

1. 新規アニメーションを追加

Animateモードに切り替えて、左下の＋ボタンから新規アニメーションを追加します。
Scalingにリネームしておきましょう。

2. 瞳孔にキーフレームを👁

再生方法はOne Shotのまま、Duration等の値も変更の必要なしです。

Flutter上で画面中心と現在のドラッグ位置の二点間の距離を計算して、
その距離に応じてScalingアニメーションを再生します。

まず、30フレームあたりにデフォルトサイズでキーフレームを打っておきます。

最初のフレームへ、瞳孔が開いたサイズのキーフレームを打っていきます。

再生してみましょう👇

Scalingアニメーション

ヨシッヨシッヨシッ🐱

ずみこうずみこう

エクスポート

一通り完成したので、Flutterで使えるように画面左上のメニューからDLします💾