どうもharutoです🐒
今回は、Riveを使ったアニメーションでどんなことができるのかや気をつけないと上手く実装できないポイントなどを振り返りつつ公式のドキュメントを追ってまとめて作成時に見返していけるものを目指して書いていこうと思います 🚗💨
（※ここ使い方違うよとかこれで便利に行けるよなどあればコメントいただけると嬉しいです）
Riveとはなんぞややこんなの作ったよの紹介は過去の書いていたりするので、ぜひ合わせてお読みください 📨
今回のサンプル
今回はサンプルとして、下のアニメーションの作成手順例に沿って説明していこうと思います。
其の壱を読むとイラストに動きをつける方法を其の弍を読むとボタンのタップなどで遷移などを実装する方法を其の参を読むとRiveで実装したアニメーションをエンジニアの方と連携してアプリやウェブなどに組み込む方法を理解できるようになると思います。
アニメーションのイメージ
▼ こちらから実際に触れます！
繋ぎ目とか色々作りは雑ですが！コミュニティにあげてみたのでよかったら実際にこんなことができるんだ〜のイメージとして触ってみてください 👀
どんな話が書いてあるの？
今回は以下の3部構成で、お届けしようと思います📮
其の壱
早速、其の壱『まずは動かしてみよう』に移っていきます。
其の壱は、主にまだアニメーションツールを使ったことがないよという方に向けた記事なので、Aeやlottielabなどすでにある程度使い方は知っているよ！という方は、Riveのアニメーション作成で特徴的な機能ついてまとめた下部の【📕Riveの特徴機能ピックアップ】のみさらっとご覧いただくくらいで次の記事に移っても良いかもしれません📚
まず初めに動かしたい対象のデザインを用意します。Riveにはfigmaのようなインターフェースでデザインが作れるデザインモードと実際に作ったデザインに動きをつけたりできるアニメモードがあります。
画面の右上から切り替え
Rive内でデザイン作成からアニメーションまで一貫で行うことも可能ですが、自分はRiveでデザインから作ろうとすると機能が少し少なかったり動きが遅かったりするので、illustrator・figmaであらかじめsvgで書き出して取り込みをしています。
それ以外のriveに取り込みインポートでは対応できないテキストを入れたり、アニメーションをつけやすいようにレイヤーの配置や内容情報の整理をする形で自分はデザインモードを使用しています。
▼ モードに関する説明はこちら
▼ インポートの方法に関する説明はこちら
動かしたいデザインを用意できたら実際に動きをつけていきます。
フレームを選択した状態でアニメーションモードに切り替えてください。切り替え後、プラスボタンからアニメーションを作成しようとするとタイムラインとステートマシンという2つのタイプが出現します。
今回はタイムラインを選択して作成していきます。
画面左下の+ボタンから選択
▼タイムラインとステートマシーンの違い
💡 タイムライン
単純な動きを作るための機能で、設定した通りに最初から最後までその動きを繰り返すのが特徴です。After effectsやlottieなどでも提供しているような一般的なアニメーション作成をするときに使います。（この記事ではここまでについて書きます）
💡 ステートマシン
ステートマシンは、複数の動きを切り替える仕組みで外部のイベントやユーザーのアクションに反応して、よりインタラクティブな動きを作りたいときに使います。
例えば「ボタンをクリックしたら別のアウトラインに切り替えてアニメーションを切り替える」というように、状況やユーザーの操作に応じてアニメーションを変えることができます。
作成後、最初はパネルに色々表示されるので混乱すると思いますが、左から2つ目のアニメーションタイプを認知しておけばOKです。
アニメーションのパネルに表示されるもの
アニメーションを選択すると3パターン表示されますが、使い分けは以下の通りです。
▼ アニメーションタイプ
One-shot
始まりから終わりまで再生して終了
（00:00 → 10:00 → fin）Ping-Pong
始まりから終わりまで再生したら終わりから始まりに戻りを無限ループする
（00:00 ↔︎ 10:00）Loop
始まりから終わりまでのアニメーションを無限ループ
（00:00 → 10:00 → 00:00 → 10:00 → 00:00 → •••）
▼ タイムラインの詳しい内容はこちら
タイムラインの作成までができたら、まず左側のヒエラルキーから動きをつけたいオブジェクトを選択してそれぞれにキーを打って動きをつけていきます。
例えば、XY座標を動かしたり、回転させたり、サイズを変えたり色々できます。
キーを打った後のイメージ
▼ヒエラルキーとは？キーとは？についてはこちら
最後にAEなどではイージングと呼ばれているインターポーレーションで、オブジェクトの動き方・アニメーションの速度に緩急をつけて好みのアニメーションに調整します。
▼インターポーレーション（イージング）とは？についてはこちら
ここまでできたらタイムラインでのアニメーション作成は完璧です！
次の記事でstate machineを使った複数の動きを切り替える仕組みについてまとめていきます
▼おまけ
最後にRiveのタイムラインまでのアニメーションでできる特徴的な機能についてまとめます
作りながらこんなことできるっけと眺める用に残しておきます📕
💡Bones
腕や枝、旗など関節で動くものに対してスケルトンをつけることができる機能です。
▼ この方の作品を見ていただくとこんな感じか〜がわかります
▼ 機能の説明はこちら
💡Animating Draw Order
アニメーションさせる中でレイヤーの上下関係を入れ替えることができる機能です。（まだ使ったことないので使ってみたい）
▼ 機能の説明はこちら
💡Solo
アニメーションを一つだけ目立たせるための機能です。たくさんの動きが重なっている時に一部の動きだけを選んで確認できます。
例えば、1つのアニメーションの中でキャラクターの表情を「笑顔」「驚き」「悲しみ」の3パターンに分けたい場合、それぞれの表情を個別に作っておいて、ソロ機能を使って一つ一つの表情を確認・調整することで、他のパーツや動きに影響されずに、表情だけに集中して作業できます。
正直今回までこの機能を知らずに手間のかかる調整をしていたので大きな発見でした（🐵 < ｳﾚｼｲ）
▼ 機能の説明はこちら
💡Joysticks
キャラクターの動きを自由にコントロールできるようにする機能です。ゲームのコントローラーについているジョイスティック（スティック部分）と同じような感覚で、ドラッグして動かすと、その方向に合わせてキャラクターやオブジェクトが動くように設定できます。（まだ使ったことないので使ってみたい）
▼ 機能の説明はこちら
💡Contraints
あるオブジェクトのプロパティを別のターゲットオブジェクトと共有する機能です。IK・ Distance・Scale・Rotation・Transform・Translation・Followのたくさんの種類があります。まだ使ったことないので勉強します。
▼ 機能の説明はこちら
💡Text Runs
一つのテキストボックスに対して複数のフォントを適応したりネイティブでの実装時に動的に情報を入れ替えられるようにしたりすることができます。かなり使い込める機能なのでぜひ一度解説記事を読むことをおすすめします。
▼ 機能の説明はこちら
其の弍・其の参はこちらから💁♂️
Discussion