はじめに

ありちぇるです。

みなさんは普段アニメーションをつける際、どのような方法を取ることが多いですか？

あっと目を引くアニメーションが私は好きで目指していきたいところなのですが、
After EffectsとLottieを使用してよりリッチに繊細に...と思いつつでしたが重い腰が上がらず。

今回はブラウザでサクッと動かせる「Rive」というWebサービスを使用してみたので紹介させてください。

この記事について

下記程度のアニメーションの作成を目指します。

Riveを使用して「x軸 y軸の移動」と「回転」と「拡縮(スケール)」のアニメーションを設定しキーフレームを打ち込むところまで解説します。

Riveとは

Riveとは、リッチなアニメーションをプラットフォームで使えるようにしたWebサービスです。
svgを使用したアニメーション作成はもちろん、
State Machineを駆使してインタラクティブなコンテンツをも作成することもでき、
さらに後述しますが競合となりそうなLottieよりも軽量です。

また、Riveはブラウザ上で完結できるのも魅力。
2018年 12月に公開されたので5年経ちましたね。

基本機能は無料で使えますが、
ファイルが3つまでしか管理できなかったり、ロゴが入ったりするので実務で使用するには有料プラン必須です。

Riveを導入するにあたって問題点

前述の通り、無料版では下記の制限があります。

3つのファイルまで
ロゴ付きでエクスポート

執筆時点では 24$/月で下記機能が開放されます。

無制限のファイル
ロゴなしでエクスポート
リンクを共有する
無制限の履歴
カスタムフォント

ロゴ付きでエクスポートでは実務で使用できなさそうなので、気に入った方は有料版でご検討くださいませ。僕は前向きに検討してます。

導入手順

公式ページから「Get Started」をクリック

アカウント作成

「Blank artboard」を選択して「Create」クリック
デフォルトだと500×500のサイズですが、ここで変更もできます。(のちほどアートボードからも変更可能です)

ここから作成していきます。

作成手順

基本的にはAfter Effectsなどと同じようにキーフレームを打ってアニメーションを作成します。

今回のデモではsvgを用意する手間を省きテキストを動かしますので割愛しますが、
svgを用意してより複雑なグラフィックをアニメーションさせることも当然可能です。

下記はデモで用意されているうちの1つです。

アニメーションの前に：テキストの準備

左上の「Text tool」タブから範囲を選択し、テキストを作成します。
色やサイズなどは右側のタブにより変更できます。フォントがたくさんあってとってもいい感じですが、今回はその中でもとびきり素晴らしいものを選びました。

さらにここからパス化して、一文字ずつ自由に操作できるようにしていきましょう。
「Flatten to Shape」を選択します。

アニメーションの前に：Boneを使おう

Boneとは、
対象のグラフィックに関節をつけたような、変形させたアニメーションを容易にする機能です。腕、旗、木の枝など、複数の接続されたパーツをアニメーション化するのにとても適しています。
今回は「h」が走ってくるようにしたいのと「l」でブンブンしたいので、Boneを設定し文字を変形できるようにしてみます。

Boneのチェーンを作成するには、右上メニューにある[Bone Tools]を選択して、任意の箇所をクリックします。
再度クリックすると起点から終点までにBoneを作成します。
続けてクリックしていくと、連結したBoneを作成できます。
終了するには右上メニューにある[Transform Tools]の「Select」を選択します。(ショートカットを使うと便利です)

「h」などのように1つのBoneから2つ生やす場合は、生成したBoneの点をクリックしてから[Bone Tools]を選択します。

「l」も同じようにBoneを作成します。

ただこのままではBoneはテキストに接続されていないため、接続する作業を行います。

接続したい要素を選択した上で、画面右側にある「Bind Bones」を選択します。
接続したいBoneをすべて選択します。(shiftを押しながら複数選択ができます)
テキストをさらに選択すると、白いドットが出るのでBoneに接続したい範囲を選択し、どのBoneがどの割合で影響を受けるか％で重み付けをします。(今回はわかりやすくすべて100%としています)

これでテキストとBoneが接続でき、Boneの動きについてくるようになりましたね。走り出せそうです。

アニメーションの前に：Freezeを使おう

Freeze機能を使用すると、子の位置を変えることなく親の位置をアニメーションさせることができます。
また、動きの起点を制御することができ（ようはtransform-origin）、
今回は後者のために設定していきます。

デフォルトでは隅に設定されているので、このまま回転させていくと意図しない動きになってしまいます。
「a」と「c」と「e」はごろごろ転がるようにしたいので、起点を要素の中央に変更しておきます。

右上メニューにある[Transform Tools]の「Freeze」を選択します。
起点を変更したい要素を選択すると起点のサークルが出るので、上もしくは右の矢印をドラッグします。
「Done」を選択します。

これでRotationの値を変更した際に意図した動きになりましたね。

アニメーションの作成

簡単ですが準備は完了したので、ここから動きをつけていきます。
今回のデモでは「x軸の移動」「y軸の移動」「回転」「拡縮」のみで作成していますので、この4つを解説しつつキーフレームの打ち方を解説します。

前準備

右にある「Animate」を選択するとアニメーション用のUIに変更できます。
最初は「State Machine 1」が選択された状態になっていますが、今回は使用しないのですぐ下の「Timeline 1」を選択しましょう。

今回は開始時と終了時に何もない状態でループできるようにしたいので、すべての要素を画面外に移動させます。
移動させたい要素を全て選択した状態で、右側にあるPosition xかキーの右で移動させます。
テキスト全体のシェイプだけを選択して移動させるとのちほどの個々のアニメーションの座標で少し苦労するので、
今回は正直に1つずつ選択しています。

移動させたことで対象の要素のキーフレームが下に出てきましたね。

さらに全体の時間を少し修正します。
テキスト全体が表示される決め画面までを3秒にします。

秒数が表示されている部分をクリックします。
「Duration」を3秒まで伸ばします。

このキーフレームを基準に、以降のアニメーションを付与していきます。

「i」の頭部分を弾ませるアニメーション

全体の前半で「i」の丸部分だけボールが弾む動きをつけていますが、
x軸とy軸の動きを組み合わせて作成していきます。

x軸の終点のキーフレームを打つために時間を3秒地点まで移動し、左のキーでキメのx軸まで要素を移動させます。
キーフレーム右にある「Position x」のイージングを設定します。

全体のアニメーションを付与する過程で都度調整しますが、
とりあえずx軸の動きは完成です。

続いてy軸ですが、
ボールが弾む表現のために徐々に低く徐々に時間が短くなるよう意識してキーフレームを打ってみます。
ただこの時0秒時点でのy軸のキーフレームは存在しないので、y軸の起点を作っておきましょう。
0秒時点まで戻ってy軸の値を少しでも動かせばキーフレームができます。

時間を適度に動かしながら、上下のキーでボールの位置を決めていきます。
このとき「Position y」にフォーカスを当てておくと移動の軌跡が表示されるので直感的に操作がしやすくなります。

このままでは動きがカクカク状態なのでイージングを付与して滑らかな動きにしていきます。
x軸の時はわかりづらかったですが、イージングを設定するとカクカクだった曲線が丸みを帯びて、こちらも直感的に操作ができて便利ですね。

x軸の動きも合わせて調整して、ボールの弾む動きはとりあえず完成です。

「h」のBoneを使ったアニメーション

Boneを設定した「h」のアニメーションを作成します。
走ってくる感じのアニメーションをつけたく、先ほどと同じ手順になりますが作成していきます。

Boneを設定しているとBoneレイヤーを動かすことで接続した要素も一緒に動いてくれるので、キーフレームを打つ対象はBoneにしています。
まずはx軸を先ほどと同じ手順で移動させましょう。

続いて動かしたいBoneを選択、「Rotation」を変えてそれぞれ角度をつけます。
キーフレームは現在いる秒数時点で打たれますがドラッグで移動することができます。

選択状態のキーフレームをコピペすることもできますので、開いている状態と閉じている状態を作成しコピペをして、一連の流れを作成していきます。

「i」の下部分を下から生やすアニメーション

「i」の下部分は「Scale y」の値を変更して下からニョっと生えてくるようにします。

最初にx軸を移動させていましたがこのキーフレームは削除しましょう。
代わりに最初に「Scale y」を0にしたいので、0秒時点で設定します。
ニョっと生えだす開始のタイミングで再度「Scale y」で0のキーフレームを打ちます。
終了地点で、「Scale y」を100% にします。

さらにイージングをつけていきます。
同じようにペジェ曲線を変更し付与しますが、伸び切ってから戻るような動きにしたいのでBackの動きになるように設定します。
先に動きをつけたボールの動きを最後に跳ね上がるように調整して、完成です。

全体の微調整をかけていい感じに...

今回のアニメーションで使用している動きは以上の「x軸」「y軸」「回転」「拡縮」のみです。
「a」などのごろごろ転がる動きは「x軸」と「回転」を調整しましょう。

キメができたら、
捌ける動きまでの時間を再度5秒ほどまで延長し、同じようにキーフレームを打っていきます。

とくにイージングのかけどころが難しく私も勉強中ではありますが、あとは以上の調整をひたすら繰り返して全体を調整して完成させていきます。

以上で
とっても楽しそうにありちぇるが登場するアニメーションが完成しました。

webに表示させる

「Download」 → 「For newest runtime」をクリックして.rivファイルをダウンロードしましょう。
rivファイルはcanvasに描画します。

srcにrivファイルを指定し、stateMachinesにはデフォルトで「stateMachine 1」と記載します。
(キーフレームを打っていたTimeline 1の上にあるstateMachineの名前を入れます)

<html>
<head>
  <script src="https://unpkg.com/@rive-app/canvas@2.7.0"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    new rive.Rive({
      src: "/arichel.riv",
      canvas: document.getElementById("canvas"),
      autoplay: true,
      stateMachines: "StateMachine",
    });
  </script>
</body>
</html>

Lottieとどっちがいい？

Feature	Lottie	Rive
File Size	181.7 KB	18 KB
GPU Memory	~149 MB - 190 MB	2.6 MB
JS Heap	16.9 MB	7.3 MB
CPU Usage	91.8%	31.8%

Riveは、リアルタイムで実行するために最適化されており、
可能な限り高速にするために最低限必要なものだけが含まれています。
一方、Lottieは、ランタイム向けに設計されていないAfter Effectsに依存しており、
上記の結果につながっているようです。

Riveの公式サイトでは下記の通りです。
使用するシーンに合わせて使い分けれるとよいですね。

After Effects はポストプロダクションの強力なツールであり、膨大な数のエフェクトを提供します。Rive は After Effects と競合しようとしているわけではありません。これらはさまざまな仕事に適したさまざまなツールです。映画やテレビのポストプロダクション作業を行っている場合は、After Effects を使用する必要があります。しかし、製品、アプリ、Web サイト、ゲーム用のインタラクティブなグラフィックスを構築している場合は、Rive に満足していただけると思います。

引用元：https://rive.app/blog/rive-as-a-lottie-alternative

終わりに

Riveで慣れたらAfter Effectsのハードルが下がるかも...と思い試していましたが、
Riveもかなり強力で、今回紹介した機能も一部中の一部にすぎません。
有料ですがwebに表示させないところまでは無料で足りるので、
引き続き知見を深め、よりリッチな表現を身につけていきたいところです。

ありちぇるでした。

Riveを使用してアニメーションを作成したい