webアニメーション
あなたは作成したことがありますか?
今回は、簡単にインタラクティブなアニメーションを作成できる「Rive」を紹介します。
WordPressなどのwebサイトやアプリの装飾に取り組んでみたいという方は是非ご覧ください。
「ブログ」始めてみませんか?
Rive学習のアウトプットで収益化も狙えるチャンスです。
低コストで始められる「ロリポップ」がおすすめです。
[PR]
▷ ロリポップ
Riveってなんですか?
Riveの魅力
Riveの最大の魅力
それは、簡単にインタラクティブなアニメーションをブラウザ上(Desktopアプリとしても可)で作成できる事にあります。
また、Riveで書き出したファイルは、ほとんどの主要なプラットフォームで利用可能です。
- Share Links(共有リンク)
- Cloud Render(ビデオのエクスポートビデオのエクスポート)
- Unity
- Unreal
- Web(JS)
- ios
- Android
- Windows
- React
- React Native
- Flutter
- C++
- GameKit for Flutter
シンプルな高レベルAPIと、より高度な低レベルAPIをそれぞれ提供してくれているのでWebアニメーション作成を強力にサポートしてくれます。
無料で利用できる?
Riveにサインアップ後、一部機能制限がありますが
無料で利用できます。
主な機能と有料プランとの違いを次の項目で
紹介します。
料金プラン
プラン毎の主な機能をまとめました。
詳細は、Rive公式の「Pricing」ページをご覧ください。
FREE | VOYAGER | ENTERPRISE | |
---|---|---|---|
個人ファイル | 無制限 | 無制限 | 無制限 |
共同ファイル | 3 | 無制限 | 無制限 |
プロジェクト | 1 | 無制限 | 無制限 |
アセットサイズ | 10 MB/アセット | 100 MB/アセット | 100 MB/アセット |
Riveランタイム | ◯ | ◯ | ◯ |
ShareLink | ー | ◯ | ◯ |
カスタムフォント | Googleフォントのみ | ◯ | ◯ |
カスタムオーディオ | ー | ◯ | ◯ |
改訂履歴 | ー | 無制限 | 無制限 |
バックアップ | ー | ◯ | ◯ |
バッチエクスポート | ー | ◯ | ◯ |
専用Slack | ー | ー | ◯ |
カスタムトレーニング | ー | ー | ◯ |
カスタムオンボーディング | ー | ー | ◯ |
専任マネージャー | ー | ー | ◯ |
料金 | $0/月 | $32/月 | $120/月 (年間収益が$10M以上の企業向け) |
Rive公式ガイド
詳細は、公式ガイドをご覧ください。
Riveをオススメする3つの理由
① デザインとアニメーション
Riveは、1つのエディター内でデザインとアニメーション制作ができます。
② 豊富なエクスポート先
Riveで構築した作品をWebサイトやアプリ等で
まったく同じように動作させることができます。
- Share Links(共有リンク)
- Cloud Render(ビデオのエクスポートビデオのエクスポート)
- Unity
- Unreal
- Web(JS)
- ios
- Android
- Windows
- React
- React Native
- Flutter
- C++
- GameKit for Flutter
アニメーション制御のロジックを駆使する事で
ホバーやクリック等のListeners機能をRiveで
設定することができます。
Listeners機能の例
③ ファイルの軽さ
ファイルサイズが小さいということも
Riveの利点です。
Riveファイルのサイズは、ビデオ、GIF、画像シーケンス、JSONベースのフォーマットと比較しても数分の一程度(数 KB )です。
アニメーションをバンドルする場合やリモートで配信する場合でもRiveの最適化されたフォーマットはアプリサイズを小さく保つ事ができます。
番外編:WordPressでRiveを使う方法
こちらの記事にまとめましたのでご覧ください。
Riveのまとめ
デザイン・アニメーション・エクスポート
オールインワンのRive
Webアニメーションを様々なプラットフォームに取り入れる際は、強力なツールになります。
個人開発のアプリや無料テーマでのブログ作成など、どうしてもチープさが気になるという方は、Riveによるアニメーション装飾がオススメです。
本格的でオリジナリティの高い作品に仕上げる事ができます。