Rive とは
Rive は、インタラクティブでダイナミックなアニメーションを作成・管理するためのツールです。デザイナーとデベロッパーが共同でリアルタイムなアニメーションを作成でき、ゲームやアプリ、ウェブサイトに容易に組み込むことができます。Rive のアニメーションは、フレーム単位の編集や複雑な状態マシンを活用し、滑らかでレスポンシブなユーザー体験を実現します。また、軽量でパフォーマンスに優れているため、さまざまなデバイス上で効率的に動作します。
Rive の動作が重くなる場面
ただ、そんな Rive でも動作が少し重く感じる場面があります。それは、同じ .riv ファイルをアプリケーションの複数の部分や同じ画面内で使用する場合です。
例えば、ショッピングアプリや SNS アプリのような場面を考えてみてください。
これらのアプリでは、商品一覧や投稿のフィードに多くのお気に入りボタンが表示されます。
各商品や投稿に対して Rive アニメーションを使用したお気に入りボタンが設置されている場合、それぞれのボタンが個別に Rive ファイルを読み込むことで、アイテムの描画が遅くなることがあります。
このような状況では、効率的なファイル管理が重要になります。
Rive 公式が提供している対処方法
Rive のファイルキャッシュに関する公式ドキュメントを参照すると、これらの問題に対する対策が示されています。
Rive ファイルを複数の場所で使用する場合や、同じ画面内で多くの Rive アニメーションを表示する場合、ファイルを一度読み込んでメモリに保持する方法が推奨されています。これにより、アプリ全体のパフォーマンスが向上し、描画が遅くなる問題を軽減できます。
ただし、公式ドキュメントの「Rive のファイルキャッシュ」に関するページには、具体的な実装例が不足しているため、実際のアプリケーションに適用する際には、独自の工夫が必要になるかもしれません。詳細については、公式ドキュメントを参考にしながら、自身のアプリケーションに合った方法を検討してください。
Swift での具体的なキャッシュ方法の一例
僕のアプリでは、Rive-iOS のインターフェースの全体を見回して、適当なイニシャライザを探り、些末ながらも Rive のファイルキャッシュを実装しました。
具体的には、RiveFile オブジェクトを一度だけ初期化し、static 修飾子を使って静的シングルトンとして管理する方法を採用しています。
private static let riveFile: RiveFile = try! .init(
name: "FavoriteAnimationRiveFileName", // .riv ファイル名
in: SomeBundle // バンドル
)
private var riveModel: RiveViewModel = .init(
.init(riveFile: riveFile),
stateMachineName: "StateMachineName" // ステートマシン名
)
実際にこの方法により、カルーセルやグリッドで多数の Rive ビューを表示しても、描画が遅くなることを防ぎ、スムーズな操作性を実現できました。
終わりに
Rive は優れたアニメーションツールだと思っており、僕自身 Rive をもっと活用していきたいので、関連する記事が増えてコミュニティ全体で知見を共有できると嬉しいです。