【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう!

こんにちは。ノゾエ(@conoito)です。

今回は、Bodymovinを使って、アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担が減った話です。

今まで私たちのチームでは
ネイティブアプリでアニメーションを実装する際に
熟達した職人(エンジニア)による洗練された技
長い年月を費やして培われた眼力を駆使して
mp4で渡した動画をコマ送りし、
zeplinから書き出された素材(たまに書き出せない)を組み合わせて、
アニメーションを作成していました。

なので、複雑で生き生きとした可愛らしいアニメーションを爆誕させる代償としてエンジニアが死ぬなんてことが起きがちでした。

Bodymovinは、そんな過酷なアニメーションの実装コストを大幅にカットでき、デザイナーはアニメーションの実装をお願いしやすく、そしてエンジニアの死も防ぐことができます。

全てのアニメーションに使える訳ではないようなので、
実装作業でのエンジニアとのやりとりを通して得られた知見とともにまとめました。


1. Bodymovinに向いてる/向いてないアニメーション

まず、Bodymovinに向いてる(使える)ものの特徴として

⭕️アニメーションのタイミングや再生速度が固定であるもの

イメージとしては、gif画像をペタッと貼り付けるイメージ。Aftereffectで作ったアニメーションがまるっとそのまま使われてもよさそうなやつが大丈夫っぽいです。


それに対して、Bodymovinに向いてない(できない)のは

アニメーションのタイミングや再生速度が可変だったりするもの

次の動きにうつりかわるタイミングや、アニメーションの動きの速度が、システムやユーザーの動きによって変わってしまうものは向いていないかもしれないです。



2. 実装までの簡単3ステップ

[STEP①] エンジニアに、Lottieを使ってアニメーションを何とかしたい旨を伝える

Lottieを使うにはエンジニアにお願いしないといけないので、LottieとBodymovinを使ってアニメーション実装をしたい!となった段階で

「今回のアニメーション、これ(Lottie)使いたいです🙏」

って、URLと共にエンジニアに相談しておきましょう。

大丈夫そうであれば次のステップ💨


[STEP②] ZXP Installerを使ってAfterEffectsにBodymovin.zxp(プラグイン)をインストールする。


さっそくBodymovinをダウンロードします。

↑にはプラグイン本体が入ってます。

[Clone or download] > [Download ZIP] からDLします。
[lottie-web-master.zip]がDLされるので展開すると、色々入っててわかりづらいですが今回使うbodymovin.zxp[build] > [extension] > [bodymovin.zxp]のように辿れば発掘できます。他は使いません!


次にZXP Installerをダウンロードします。

↑は先ほどダウンロードしたBodymovin.zxp(プラグイン)をAfterEffectsにインストールする為に使います。

[Download Mac OS X] または [Download Windows]からDLしてください。私はMacなのでMacOSを選択しますがWindowsの方はWindowsで。


最後に、[ZXP Installer]を使って[bodymovin.zxp]をインストールします。

先ほどダウンロードした [ZXP Installer] を起動して、これまた先ほどダウンロードした [bodymovin.zxp] をドラック&ドロップで放り込めばインストール完了です。

✔︎をクリックでインストール完了!


[STEP③] 作成したアニメーションを、Bodymovinを使ってJSON形式で書き出してエンジニアに渡す。

インストールが終わると、Aftereffectに拡張機能としてBodymovinが追加され、JSON形式でアニメーションを書き出すことができるようになります


機能を展開するとこんな感じ。

Settingsが、実際に書き出す際の重要な部分に関わってくるので、必要な設定を見極めて設定しましょう。


[Settings]の中身はこんな感じ。

Split Splits comp in multiple json files every X seconds
複数のjsonファイルをX秒ごとに分割します。

Glyphs If selected it converts fonts to shapes
選択すると、フォントを図形に変換します。

Hidden Select if you need HIDDEN layers to be exported
非表示レイヤーをエクスポートする必要がある場合に選択します

Guides Select if you need GUIDED layers to be exported
ガイドされたレイヤーをエクスポートする必要がある場合に選択します

Extra Comps Select if expressions are pointing to external comps
エクスプレッションが外部コンポを指している場合に選択します

Original Asset Names Export assets with their original project names
元のプロジェクト名でアセットをエクスポートする

Standalone Exports animation and player bundled in a single file
アニメーションとプレーヤーを1つのファイルにまとめてエクスポートする

Demo Exports an html for local preview
ローカルプレビュー用にHTMLをエクスポートする

AVD Exports an xml for Androids Animated Vector Drawable
Androids Animated Vector Drawableのxmlを書き出します。

わたしは、[Glyphs][Original Asset Names]にチェックを入れています。

[Original Asset Names] を使う場面として、

「素材はZeplinで書き出された綺麗なものを使うけど、アニメーションの動きだけはBodymovinを使いたい!🤨」

という時に、Zeplinで書き出される画像と同じ名前の素材を用意してからアニメーションを作ったりしています。


無事に書き出しが完了したら
あとは、書き出されたデータを丸ごとエンジニアに託しましょう。


3. つまずいたところ

「じゃああれもこれも全部Bodymovinで作ったらマジ便利じゃん!😇

と思ったりして、「今まで実装されたあれやこれやのアニメーションもこれ使えばできるんですか?」って聞いてみたら、「向いてる向いてないの話」にもまとめたように、どうやらそんなことはないようです。


「やりようによっては、アニメーションのタイミングや速度が可変でも実装可能なのかな…?🤔

と思った時や、そもそも作ろうとしているアニメーションができるかできないか判断が難しい場合は、早い段階で実装をお願いするエンジニアと相談してみた方がよいかもしれません。(お互いに死ぬのを防ぐために)

わたしはだいたい同じようなアニメーションをどっかから探してきてそれを見せて「これってLottieで実装できますか?」って聞いています。

Lottieでは無理でも普通に作ればいけたりする時もあったりするかもなので。


4. よかったところ/よくないっぽいところ


よかったところ

めっちゃ張り切って作ったアニメーションで
エンジニアの命を削ることが少なくなりました!

また、周囲にBodymovinを使ってアニメーション実装をしている前例がなかった為、他のサービスにも伝道することができました。

エンジニアにもほめられました。やったね!(自己肯定感🆙)


よくないっぽいところ

どんな場面のどんなアニメーションでも対応できるわけではないので、
最高に万能というわけではなさそう。

なので、できると思って相談なしにやると痛い目を見ます。

相談はお早めに!


おわりに

BodymovinとLottieを使えば、アニメーションのタイミングや再生速度が固定であるものは、複雑なものでも今までよりずっと早く実装を行うことができるようになりました。

もしもアニメーションの実装を控えている方は、是非活用を検討してみてください。

(それと、そもそもこの部分ちがうよ!とか、こう書いた方がいいよ!などこの記事に関してご意見ありましたらこっそりお教えください)


\生存確認/


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

頂いたサポートは書籍費に使います🙏 サポートでなくとも、シェア等いただければとても喜びます! https://twitter.com/conoito

嬉しいです(泣) シェア等もいただけるともっと喜びます!
122

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
10つのマガジンに含まれています

コメント2件

こんにちは、Bodymovinはこちらからインストールと楽(だったはず)です :) https://www.adobeexchange.com/creativecloud.details.12557.html
@ろくぜうどん さん
コメントありがとうございます
おお、これ試したことあります!
ですがなぜかうまくインストールできず(おそらく私の手順が悪い。。)
なぜかこちらのややこしい方で成功したため、こちらで紹介しておりました
こちらでDLできるようであればこちらの方が簡単でよさそうですよね!
共有ありがとうございます、助かりました(^人^)
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。