Rive を使ったマイクロインタラクションの作成

こんにちは。CX事業本部の早河です。

この記事では、Rive を使って手軽にアニメーションを作成する方法について説明します。

Rive とは？

Rive は、デザイナーや開発者がインタラクティブなアニメーションを作成し、プロジェクトに統合することができるデザイン・アニメーションツールです。

https://rive.app/

個人的に Rive いいなと思うところ

コラボレーションプラットフォーム

• Webベースなので、共有や連携などが容易。

包括的なパイプライン

• エディターでデザイン→アニメーションを作成→必要なフォーマットで書き出しまでのプロセスを1つのツールで完結することができる。

パフォーマンスと小さなファイルサイズ

• iOS、Android、Reactなど複数のプラットフォームにおいてもファイルサイズを抑えた、スムーズなアニメーションを提供できる。

Riveを始めるにあたって

制作を始める前に、Riveのアカウント登録する必要があります。無料アカウントでは3ファイルまでアニメーションを作成できます。

Riveでアニメーションを作成する方法

今回はマイクロインタラクションでよくありそうな、いいねボタンを押した時のエフェクトを作成してみようと思います。

ステップ1：新規ファイルの作成

ログインができたら、ダッシュボードに「新規ファイル」作成のダイアログが表示されます。今回は1からアニメーションを作成するので、Blank Artboard をクリック。

そうすると新しいアニメーション編集画面が表示されます。

ステップ2：デザインツールの使用

ワークスペースの左側には、デザインツールがあります。これらのツールを使って、図形やパスを作成したり、色やグラデーションを追加したり、パス編集してデザインしていきます。

今回はシェイプを使ってRiveでデザインを行いましたが、svg の読み込みも可能なので使い慣れたデザインツールで作るのも良いかもです。

ステップ3：アニメーションの作成

デザインができたら画面右上から、「Animate」モードに切り替えてください。

State Machine が選択された画面が表示されますが、今回は使わないの忘れてください。 アニメーションを作成するには、Timeline1を選択します。

キーフレームを打って、各種プロパティを変更していく方法でアニメーションを作成していきます。イージングやマスクなど大体のことはできます。

ステップ4：アニメーションの書き出し

アニメーションができたら　.riveファイルとしてエクスポートすることができます。このファイルは、iOS, Android, Webなどさまざまなプラットフォームに展開することができます。今回は作成したアニメーションを Riveコミュニティに公開してみました。

prcatice_like_effects

まとめ

Rive はアニメーション作成において強力なツールになると思いました。また様々なプラットフォームで実行可能な点も心強いです。まだベータ版なのに！ (2023年5月現在)

この記事では基本的な部分しか説明しませんでしたが、State Machines という機能で、遷移にロジックを定義して制御可能なアニメーションを構築したり、Bone 機能でより高度なアニメーションをさせたりとまだまだ探求できそうです。次はBone 機能を使ってくらニャンを動かしてみたいと思います。

最後までお読みいただきありがとうございました！