Wiggle等のエクスプレッションを使ったアニメーションをLottieアニメーションとして書き出した時に学んだことを自身の備忘録として残します。
Aeでのプレビュー、MP4、GIFなどでの書き出し
JSONファイルをWebでの反映
今回のユラユラしたアニメーションは、
トランスフォーム「位置」にエクスプレッション wiggle(2,2) で動かしています。
AeのプレビューやMP4、GIFなどで書き出した時はユラユラした動きですが、JSONで書き出すと高速でガタガタした動きになってしましました。
原因としては、下記の理由だと考えられます。
エクスプレッションが対応されていない
Lottieの公式によるとwuggleなどのネイティブ関数がサポートされていないのが原因みたいです。
エクスプレッションをキーフレームに変換
キーフレームを最初から手打ちし直す悪夢がよぎりますが、実は作ったエクスプレッションをキーフレームに変換する機能がAeにはあります！
右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換
wiggle(2,2)のエクスプレッションの上にキーフレームが打たれました。
ただ、これだけだとキーフレームが多すぎて書き出す時に重くなります、、
書き出しを軽くする為に「スムーザー」の処理を加える
ウィンドウ → スムーザー
許容量の数値を良い感じのキーフレームの数になるように入力
※今回は許容量3で良い感じになりましたが、ここはご自身で色々試してみてください。
スムーザを加えたwiggle(2,2)のキーフレーム
キーフレームの数が少なくなり、アニメーションが滑らかになり、書き出したデータも軽くなります。
エクスプレッションの削除
最後にエクスプレッションのWiggle(2.2)を削除します。
※ここでエクスプレッションを削除しないと反映されないので、忘れずに削除しましょう！
↓↓↓
BodymovinでJSONに書き出せばGIFやMP4で書き出したエクスプレッションの動きがJSONに反映されます。
まとめ
①エクスプレッションでアニメーションを作成
②エクスプレッションをキーフレームに変換
右クリック → キーフレーム補助 → エクスプレッションをキーフレームに変換
③スムーザーで書き出しを軽くする処理
ウィンドウ → スムーザー
④エクスプレッションを削除
⑤BodymovinでJSONに書き出し