ゆるゆるlottieアニメーション制作(とびはねる細尾さん編)

author

ito

みなさん、こんにちは！
春っぽくなってきましたね〜！これは先日の雪にはしゃぐ伊藤です！

さて、本日のブログのテーマはズバリ『Lottie』です！

実は私、spicatoで動画やアニメーションのお仕事を担当させていただくことがよくあります。
大学時代、映像を少し学んでいたこともあり、PremiereやAfter effectsを少しだけ触ることができるのです！

Lottieを知ったきっかけは、spicatoに1年前に入社したエンジニアであり、アニメーションの申し子のかなちゃんに存在を教えてもらいました。
今回は、私がアニメーションを作る時にどんなことをしているのかをゆる〜く紹介してみようと思います！(ゆ、ゆる〜くです！)

それではいってみましょう！

Lottieって？

めちゃくちゃ詳しい原理などは、もう素晴らしい記事がたくさん出ているので、超初心者の私の意見を申し上げますと・・・

■ズバリ、いいところは？

とにかく、軽い！
パスアニメーションなので、とっても綺麗！
動きの細部まで表現できる！

■あんまり向いていないものは？

テクスチャが強すぎるイラストレーションをうごかす
3D表現を用いた動き
画像などが入っているもの

つまり、平面的でパス化可能なイラストやモチーフを滑らかに動かすことができるのです・・・！(2022年現時点では)

Lottieアニメーションの作り方

さて、この記事はゆる〜〜くLottieを紹介する記事ですので、ゆる〜くいきますよ。私がLottieアニメーションを作るときの手順は、以下になります！

■事前準備(lottieで描き出せるように準備します！)

~~ZXPInstallerをダウンロードし、インストールする~~
(2022.03.08情報)今はZXPInstallerをインストールしなくても大丈夫なようです・・・！
Bodymovinをダウンロードし、インストールする
お使いのAfter effectsの[ウインドウ]>[エクステンション]>[Bodymovin]が入っているか確認！
After effects[環境設定]>[スクリプトとエクスプレッション]>1番上に出てくる[スクリプトによるファイルへの…]にチェックを入れる

■制作開始！

動かし方を考える(頭の中)
動きを想像し、素材をパーツに分ける(Photoshop & Illustrator)
素材を読み込み、ベクトルレイヤーからシェイプを作成(After effects)
動きをつける(After effects)
※エフェクトは使用せず、トランスフォームのみで
Bodymovinで書き出し！うまく表示されるかチェック！
※こちらのサイトで何もかもができます
エンジニアさんにそっと渡す。。。

実際に、作ってみよう！

では、実際に作ってみましょう！
本日、動いていただくのはこちら！！

私が描いた、ミニミニほそおさん！！！！！！！！！！！！！！！！！

我ながら、自信作。かぶっているのはニット帽。私の描くほそおさんは常に冬。
さあ、ほそおさん、私の手でかわいく羽ばたいてくれ・・・！

では、パーツ分けを

iPadでほそおさんを描く(この時点でレイヤーを分けておくととても◉)
Photoshopで色などを調整し、レイヤーも分ける
(顔、体など、動かしたい箇所はなるべくバラバラに！)
Illustratorで読み込み、[画像トレース]でパスへ！
(このとき「再現度が低い」「パスが多すぎる」場合はLottieじゃないほうがいいかも。。)

実際に動かすよ！

さて、After effectsに移動してきました。ファイルサイズと時間をなんとなーく設定し(い、いつもはしっかり計算しています！)コンポジションで読み込みます。
このとき画像中央下を見ていただければわかると思うのですが、データはAIですので、[ベクトルレイヤーからシェイプを作成]でシェイプへ変換します。(変換できたら、AIは消してしまって大丈夫！)

はい！変換しました！！！！！
この、[ベクトルレイヤーからシェイプを作成]が重要で、ここさえクリアしてしまえば、あとはもう、動かすだけ・・・！

Lottieはエフェクトやパペットピンは現時点で未対応ですので、トランスフォームのみでアニメーションをつければ安全かな！と思います。
一応、未対応エフェクト一覧はこちら！

After effectsの使い方(鬼初心者向けしかできないですが。。)は、またいつかちゃんと記事にできたらいいなあ。。今回はさささっと！

■動きの軸(どこを起点として回転や拡大するか？)を全パーツきめます。
(上図だと、右足の軸は右足の付け根がいいかなと思います、人のイラストの時は、関節を意識して！)

■親要素を決定し、紐付けます。
親要素とは、なんか。。えっと。。。大元になるパーツのことです。。(説明下手)
親要素を設定することで子要素に設定されたパーツは、親要素に基づいて動きます。人の体など、あんまりにもバラバラだと、少し心地悪いので、ある程度のグループ？として設定することが多いです！今回は、体を親要素としています。