Open14

【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にすると繰り返し再生してくれます。

Flutter内で、One Shot/Loop/Ping Pongを切り替えることも可能です。

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

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

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

5. まばたきさせる

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

パス編集

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

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

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

6. 完成

完成です👌

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

まぶたが邪魔

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

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

はじめに、AnimateからDesignモードに切り替えましょう。

Animateモードで行ったパーツの移動・サイズ変更などの操作は、
全てキーフレームとして打ち込まれていくので、意図しないアニメーションを追加してしまいます。

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

Verticalアニメーション編

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

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

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

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

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

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

y軸のPositionにのみにキーフレームを打ち込んでください。
x軸のPositinにも打ち込んでしまうと、後ほど追加するHorizontalアニメーションと干渉してしまい、
Flutterで再生する時に行うアニメーションのミックスがうまくできなくなります。

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

再生してみましょう👇

Verticalアニメーション

ヨシッ🐱

Horizontalアニメーション編

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

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

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

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

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

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

x軸のPositionにのみにキーフレームを打ち込んでください。
y軸のPositinにも打ち込んでしまうと、さきほど追加したVerticalアニメーションと干渉してしまい、
Flutterで再生する時に行うアニメーションのミックスがうまくできなくなります。

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

再生してみましょう👇

Horizontalアニメーション

ヨシッヨシッ🐱

Scalingアニメーション編

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

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

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

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

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

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

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

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

再生してみましょう👇

Scalingアニメーション

ヨシッヨシッヨシッ🐱

エクスポート

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

何か質問があればこちらに💬

ログインするとコメントできます