こんにちは。dely株式会社のiOSエンジニア、uetyoです。
この記事では、インタラクティブなアニメーションツールであるRiveを利用することで開発コストを平均5時間削減した効果と作業フローについて紹介します。📮
なお、この記事は3部作の第2部としてお届けします。
【目次】
順次公開予定です
・第1部：Riveはデザイナーにもエンジニアにも優しい神アニメーションツール
・第2部：Riveは開発コストを平均5時間以上削減してくれる神ツールになった（この記事💡）
・第3部：Riveを使って実装なしでも遊べるアニメーションを作る方法
アニメーション作成から実装完了まで平均5時間の開発コストを削減したRiveの強み
リワードアプリではいくつかのUI作成にRiveを利用していますが、今回は歩数ゲージフローティングアイコンについて紹介します。
歩数ゲージフローティングアイコンは、クラシルリワードの機能の一つであり、歩数に応じてゲージが溜まった際にユーザにアテンションを促す表現の一つです。歩数やゲージの本数といった可変的な表現を従来のLottieで行う場合、アニメーション部分はLottie、可変部分はSwiftで実装する必要がありました。
Riveでは、機能として数字やBool値の入力をサポートしており、表現するUIすべてをRive完結で作成することが可能です。この豊富な機能と実装に耐えうる十分なパフォーマンスにより、施策の実装時間を5時間削減しました。
大規模なアニメーションについては、第3部の「Riveを使ってガチャガチャを作った」にて紹介します。
実装の流れ
Lottie AnimationとRiveそれぞれの実装方法を紹介します。
Lottie を利用した場合
まずデザイナーがAdobe After EffectsとIllustratorを用いてアニメーションを作ります。この間、アプリエンジニアはアニメーションや歩数・獲得できるゲージ本数を表示するViewの作成を行います。
アニメーションが完成すると、実際にアニメーションを組み込み、再生・終了タイミングの調整、表示時間のタイマー制御などを行います。この際、デザイナーと二人三脚で細かいイージングの調整や、アニメーションファイル側の調整が発生するためコミュニケーションコストが高くなります。
また、クライアント側で独自に実装する部分が多いためコード量の肥大化にもつながり、大体1営業日ほどの開発コストがかかります。
Rive を利用した場合
RiveでもデザイナーがIllustratorを用いて素材を作りますが、アニメーションの作成はRive Editorを用いて行います。このRive Editorには閲覧機能があるため、エンジニアでも現在の進捗や最新のデータを確認することが可能です。
アニメーションが完成すると、エンジニアはRiveランタイム用のファイルをダウンロードし、アプリに組み込みます。アニメーションの修正を行った際も、アプリ側はRiveファイルを差し替えるだけです✨
クラシルリワードてはSwiftUI向けのCustomViewを作成して利用しています。詳細については以下の記事にて紹介しているので、参考になれば幸いです。
このフロー改革により、いくつかのアニメーションファイルをRiveを用いてゼロから作成しましたが、少なくとも3時間、場合によっては10時間程度の開発コストの削減を実現しています。
開発コストを大幅に削減した豊かすぎる表現方法
Riveプラットフォームにはいくつか大きな機能がありますが、特筆すべきものとして input と audio が挙げられます。
テキストを動的に変更できる Input 機能
任意のテキストやBool値をRiveアニメーションファイルに動的に入力することで、表示を変更できる機能。
歩数ゲージフローティングアイコンでは、「歩くうさぎ」に加えて「バッジの文字」「歩数」「背景色」をユーザの状態に合わせて変更する必要があります。Lottieではこの要件を達成できないため、SwiftUIを用いて動的に変更する部分を作ります。
一方、Riveでは全てを一つのアニメーションファイルとして定義・条件分岐できます。この機能により、背景色や表示しているテキストが違うだけのアニメーションファイルを大量に用意する必要がなくなります。
任意のタイミングで効果音を再生できる Audio 機能
2024年の4月くらいにリリースされた比較的新しい機能がが Rive Audio 機能です。
ユーザの操作に合わせて任意の音声をアニメーションと同じタイミングで再生することができます。
ユーザの操作に合わせて効果音をつける場合、タイミング調整が非常に面倒ですが、この機能によりよりカジュアルに利用することが可能になりました。
実はこの機能、iOS版リリース当初にBluetoothイヤホンを繋げていてもスマホ本体から爆音で音声が流れるというバグがあり、使いたくても使えない状況でした。Issueにも記載したのですが、なかなか返信してもらえない状況が続いたため直接メールを送ったところ2日で修正してくれました！
まとめ
- クラシルリワードではアニメーションを用いてキャラクターがいきいきとした楽しいアプリを開発しています
- このアニメーションを支えているのが Rive というサービスです
- Rive を利用することで大幅な開発コスト削減を実現しました
Riveは毎回大きめのリリースを行っており、フォーラムをDiscordから独自のプラットフォームに移行したり、Issue報告しても返信がなかったりと不安になる面ありますが、メリットが上回っている状況なので今後もしばらく利用していく予定です。
3部作最後の記事は、Riveを使って実装なしでも遊べるアニメーションを作る方法です。
Discussion