最近、YOUTRUSTのアプリが以前よりもアニメーションで表現豊かになってきたと感じた方もいるかもしれません。 その仕掛け人は誰でしょうか…？実は、僕なんです
あるとき、マネージャーから 「ボトムバーをアニメーションで動かしたいんだけど、できる？」 と相談されたのがきっかけでした。
その瞬間、めちゃくちゃ嬉しかったんです。 というのも、僕は12歳の頃からPhotoshop や Premiere Pro、After Effects などをいじって動画やアニメーションを作るのが大好きで、ずっと趣味で続けてきました。 これまで培ったスキルをついに仕事で活かせるときが来た！って思ったんですよね。
普段は実装担当としてコードを書くことが多いんですが、今回はデザイン面にも直接関われる貴重な機会でした。 そして、僕自身が大ファンの Rive を使って、すぐに開発に取り掛かることにしました 🚀
Riveとは？🎨✨
Riveは、リアルタイムで動くインタラクティブなアニメーションを作成・実装できるプラットフォームです。
さらに、Riveのエディタ自体もFlutterで構築されているので、
Flutterエンジニアにとって非常に親しみやすいUI/UXになっています。
アプリやWeb、ゲームにおけるアニメーション体験を革新的に変えるツールなんです。
🎯 Riveの特徴
1. コードを書かずにリッチなアニメーション
Rive の専用エディタを使えば、デザイナーがノーコードでアニメーションを作成可能。
さらに、その結果を Flutter・iOS・Android・Web に直接組み込めます。
2. 状態遷移ベースのアニメーション
Rive の最大の魅力は State Machine（ステートマシン）。
クリック、ドラッグ、ホバーなどのユーザー操作に応じて、アニメーションがインタラクティブに切り替わるんです。
例えば：
- ボタンを押すとバウンスしながら色が変わる
- スクロールに合わせてキャラクターが走る
- ゲームのHPが減るとエフェクトが変わる
マーケットプレースで様々な例が見られます。
3. マルチプラットフォーム対応
Rive は Flutter SDK や iOS / Android / Web 用ライブラリを公式で提供しているため、ひとつのアニメーションをさまざまな環境で再利用可能です。
Flutter エンジニアにとっては、アセット管理も簡単で高速なのが大きな強みです。
🔄 LottieからRiveへの移行
アプリ開発でアニメーションを取り入れる場合、今までは Lottie が定番でした。
嬉しいことに、riveがLottieからのインポート機能を持っていたので、すごく簡単でした。
⚡ Lottie vs Rive：徹底比較
| 特徴 | Lottie | Rive 🚀 |
|---|---|---|
| 開発元 | Airbnb | Rive Labs |
| 形式 | JSON アニメーションデータ | 独自 .riv ファイル |
| 作成ツール | After Effects + Bodymovin プラグイン | 専用 Rive エディタ |
| リアルタイム編集 | ❌ 不可 | ✅ 可能 |
| インタラクティブ性 | 制限的（再生 or 停止のみ） | ✅ ステートマシンで自由自在 |
| ファイルサイズ | やや大きめ | 軽量 |
| パフォーマンス | JSONパース＋Canvas描画で負荷あり | GPUアクセラレーションで高速描画 |
| 学習コスト | After Effects操作必須 | デザイナー向けUIで低め |
🎯 Riveの強み
1. インタラクティブなアニメーション
Lottieは「一方向的な再生」が基本ですが、Riveはステートマシンでユーザー操作に応じて動きを切り替え可能。
例えば：
- スクロールに合わせたパララックスエフェクト
- ボタンを押すとキャラがジャンプ
- ゲームのHPに応じてアニメーションを変化
これらはLottieでは実装が難しい、もしくは複雑なコードが必要ですが、Riveならほぼノーコードで実現できます。
2. After Effects不要
LottieはAfter Effects + Bodymovinが必須。
デザイナーにとっては学習コストが高く、開発者にとってもデータの受け渡しが煩雑になりがちです。
一方、Riveは専用エディタで完結。
デザイナーが直接 .riv ファイルを作ってエンジニアに渡せるので、制作〜実装がシームレスです。
3. パフォーマンスが圧倒的に高い
RiveはJSONではなく独自バイナリ形式を採用しているため、
ファイルが軽量で描画も高速です。
特にFlutterアプリではパフォーマンスの差が顕著で、
RiveはSkia GPU描画と非常に相性が良く、
複雑なアニメーションでも滑らかに動作します。
さらに、最近は Rive Native という新しいランタイムも登場しました 🎉
🔗 Rive Native (Flutterランタイム)
このRive Nativeは、Flutter向けにより低レベルで最適化されており、
これまで以上に高速でスムーズな描画🔥が可能になります。
⚠️ 注意
Rive Nativeはまだ公式リリース前の実験的機能です。
本番環境での利用は推奨されませんが、
次世代の最高パフォーマンスを試したい方はチェックしてみる価値があります。
🛠️ Riveへの移行のステップ
- 既存のLottieアニメーションを棚卸し
- どのアニメーションをRiveに置き換えるか選定
- Riveエディタで再制作
- Lottieから直接変換はできないため、デザインをRiveで再構築
- Flutterに実装
- flutter_genと簡単に使えますので、このコードだけで表示できます
Assets.animations.readingYutora.rive(
useArtboardSize: true,
);
キャラクターアニメーション
さらに、もうひとつ面白いチャレンジだったのが、 YOUTRUSTのマスコットキャラクター 「ユートラくん」を空を飛ばせるアニメーションを作ったときです 🕊️✨
羽をパタパタ動かす必要があったので、Riveでボーン🦴機能を使いました。 ボーンはキャラクターの「骨格」のようなもので、パーツに対してボーンを設定すると、 そのボーンを動かすだけでキャラクター全体の自然な変形や動きを表現できるんです。
例えば、羽の付け根にボーンを置き、角度を少し動かすと、 羽全体がなめらかに連動して動くようになります。 この機能のおかげで、複雑そうに見えるキャラクターアニメーションも、 実はかなり効率よく作ることができるんです 💡
Riveはこうしたキャラクターアニメーションにも強くて、 「動きをつける」というより、「キャラクターに命を吹き込む」感覚に近いですね。
〆
Riveを使えば、アプリエンジニアでも 「デザイナー並みのアニメーション表現」が手に入ります。
Flutterとの相性も抜群なので、 ぜひ一度トライして、UI/UXをワンランク上に引き上げてみてください！
YOUTRUSTでは、常にユーザー体験を大切にし、 最新の技術を積極的にキャッチアップしています。 もし、「UXを極めたい！」というエンジニアの方がいたら、 ぜひ一緒に語りましょう！🚀
