every Tech Blog

株式会社エブリーのTech Blogです。

トップ > iOS > iOSアプリにアニメーションツールのRiveを導入しようとして止めた話

iOSアプリにアニメーションツールのRiveを導入しようとして止めた話

iOS

はじめに

こんにちは。開発部でiOSエンジニアをしている野口です。

ヘルシカiOSアプリの開発を担当しており、アプリ内にはすでに「ヘルシカ」をはじめとしたキャラクターが実装済みです。

これらのキャラクターを生かしてよりユーザーに愛着を持っていただけるようにするため、アニメーションを導入したいと考えています。

Riveとは

Riveとは、Webやアプリ、ゲーム向けの「インタラクティブなアニメーション」を作成・実装するためのデザインツールです。

Riveについて調べたところ、アニメーションの作成コストが低く、パフォーマンスがいいという記事を何記事か拝見し、導入を検討しました。

Riveの導入を断念した理由

Zombie Objectの発生

Riveの検証の際に、Zombieが発生していることがわかりました。（画像はDebug Memory Graphを使っています）

Zombieとは、通常であれば削除されるはずの不要なオブジェクトが、何らかの理由でメモリに残り続けてしまう状態のことです。

つまり、プログラムのどこからも参照されていないにもかかわらず、メモリを占有し続けている状態です。この状態でアプリを使うと、思わぬクラッシュが発生するリスクがあります。

なお、XcodeのデバッグビルドでZombie Objectsをオンにしていたところ、アプリがクラッシュしてしまい、Zombieが発生していることが判明しました。

Zombie Objectsを有効にするには、XcodeでプロジェクトのScheme設定から[Product] > [Scheme] > [Edit Scheme]を選択し、[Run] > [Diagnostics]タブ内の"Enable Zombie Objects"にチェックを入れます。

Duolingoをはじめ他の企業が使用しているため、実際はこのZombieはそこまで問題ないのかもしれませんが、どうしてもRiveでないとできないことがある場合でない限りは使わないほうが良いと判断し、今回は導入をやめました。

Riveのissueを見るとクラッシュの報告はいくつか上がっており、まだ不安定なパッケージなのかもしれません。

代替アニメーション形式の検討

Riveの導入を断念したため、代替となるアニメーション形式を検討しました。

Riveでのアニメーションは断念しましたが、Riveでのアニメーション作成はAfter Effectsを使う場合と比べてデザイナーの学習コストが低いため、アニメーションの作成自体はRiveで行います。その上で、iOSアプリへの組み込み方法として以下の形式を検討しました。

GIF

  • CPU: 低
  • メモリ: 多
  • 懸念点: 24fpsで実験したところカクつきを感じるが、フレーム数を増やすとパフォーマンスに影響が出る可能性あり

APNG

  • CPU: ほぼ0
  • メモリ: 多
  • 懸念点: 透過する場合はパフォーマンスが悪くなる可能性があるらしい（要調査）、Riveから直接出力できず、変換用のアプリケーション(After Effects)を使用する必要がある

MP4

  • CPU: 再生時に上昇
  • メモリ: 少
  • 懸念点: Riveから直接出力できず、変換用のアプリケーション(After Effects)を使用する必要がある。また、デザイナーがAfter Effectsに慣れていないため、作成時の学習コストや工数がAPNGよりもかかるらしい

以下の画像の通り、MP4は動画再生時に一瞬CPUが上がり、再生中はほぼ０になります。

Rive（参考）

  • CPU: 高
  • メモリ: 中
  • 懸念点: 開発側でZombie問題あり

検証結果まとめ

検証結果を以下の表にまとめました。

先ほどの項目にデザイン工数を追加しています。 Riveでアニメーションを作成した際のデザイン工数を1として、各形式のデザイン工数を比較しています。工数はデザイナーの主観です。

  • GIF: Riveから直接出力できるため、デザイン工数は1
  • APNG・MP4: Riveから直接出力できず、変換用のアプリケーションを使用する必要がある。
項目 GIF APNG MP4 Rive
CPU 低 ほぼ0 再生時に上昇 高
メモリ 多 多 少 中
懸念点 24fpsでカクつきあり 透過時の性能低下（要調査） After Effects学習コスト Zombie問題
デザイン工数 1 1.2 1.3 1

結論：APNGを採用

エンジニアとデザイナーが協議した結果、APNGを採用することにしました。

APNGを選んだ理由

  • CPU負荷がほぼ0で、パフォーマンスへの影響が最小限
  • GIFと比較して滑らかなアニメーションが可能
  • Riveで作成したアニメーションを変換する必要はあるがMP4よりもわかりやすいため、デザイナーの工数は低いらしい
  • 透過が必要になった場合にも対応可能（要調査）

他形式を採用しなかった理由

GIF - 検証時点のフレームレート（24fps）では若干カクつきを感じる - 他形式と同様のパフォーマンスを出すには、CPUやメモリ使用量が増える

MP4 - デザイナーがAfter Effectsに慣れていないため、作成時の学習コストや工数がAPNGよりもかかるらしい - 透過ができない

Rive - アニメーションの動きは一番綺麗だが、他形式との差は誤差の範囲 - Zombieが発生しており、Xcodeビルドではクラッシュする（TestFlight配布では問題なし） - 「Riveでないとできない」という理由がなければ使わない方がいいと判断

終わりに

今回はRiveの導入を見送り、APNGを採用することにしました。

Riveはアニメーションの動きが綺麗で魅力的なツールです。しかし、iOS版ではZombie Objectの発生によるクラッシュリスクがあり、現時点では安定性に不安が残ります。今後のアップデートでこの問題が解消されれば、再度導入を検討したいと思います。

アニメーション形式の選定は、パフォーマンス・開発工数・デザイン工数など、さまざまな観点から総合的に判断する必要があります。この記事が同じような課題を抱えている方の参考になれば幸いです。