After Effects→bodymovin→スマホアプリ実装でのループ指定にハマった話

スマホアプリに実装していたPNGコマ送りアニメーションをAfterEffectsで作り直しからのbodymovinでjsonデータ化をする機会があったので、サクッと試してみまして、少しハマったので健忘録として。
注意:AfterEffectsの経験値が低いので他に方法はあるかも。です。

【原因?】アプリ実装では lottie.js は使わないらしい

Web実装のようにlottie.jsは参照せず、jsonをそのまま参照してアニメーション設定する

というiOSエンジニア談。

【問題】エクスプレッションでのループ指定が効かない

lottie.jsは使わずともLottieはImportするんだし、動かないことはないんじゃない?と普通にプリコンポーズしてタイムリマップにエクスプレッションを追加してループ指定を記載。

loopOut("cycle")

こういうやつ。至って簡単なやつ。
動かない。
jsonにはエクスプレッションの記載はあるけれど、動かない。

どうやらiOS/AndroidだとJSONの書き出しはできてもエクスプレッションに対応してないっぽい。

【解決】プリコンポーズした素材を繰り返したいだけタイムラインに並べた

見た目無駄な感じ満載ですけど、データサイズもほぼほぼ変わらなかったので、一旦これで応急措置。

他に良い案が出てきたら追記します。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
株式会社ゆめみ、とりあえずクリエイティブリードを名乗ってる人。モバイルサービスメインのデザイナー出身。東京ヤクルトスワローズをこよなく愛している。【Twitter:@Shoesk】