crftロゴ
検索

近頃、モダンなWebサイトで超高解像度なアニメーションを見ることが増えてきました。このアニメーションはAirBnBが開発したLottie という技術。

ジェットセット でも導入したプラグイン「Elementor」にはLottieアニメーションを扱えるモジュールが使えるので使い方を調べてみました。

大まかなワークフローとしては

  1. AfterEffectsでアニメーションを作成
  2. AfterEffectsでbodymovin を使ってJSON形式で出力
  3. 実装

です。

実際はJSONが使える限られた機能の中でできることを考えることがハードルでした。(URL that shows features Lottie can use)

ではステップごとに紹介していきます。

0. 準備

ローカル

・bodymovinをAeにインストール(aescript.comから無料でインストール )
・ロゴを作る

サーバー側

WordPressとElementor前提ですが、Lottieから配布されているプラグインをインストールすることで単体でも動作します。

1. モーフを作成

まずはAiで大まかなゴールと道筋になるパスを描きます。

Aeを開いて、先程のファイルを読み込みます。

このときシェイプパスに変換します。

パスとして読み込めたら、モーフを作ります。

2. JSON形式で出力

Windows>Extensions>Bodymovinを選択すると専用のウィンドウが開きます。

Lottieに書き出すコンポジションの左のチェックボックスをオンに、右の・・・から保存先を指定してRenderボタンをクリックします。あとは実装するだけです。

3. 実装

今回はElementer Proのモジュールに実装しますが、Lottiefileというサービスにアップロードすると、HTMLのコードを取得できたり、他サイトでも使いまわしたり、色の変更などができるエディタが使えたりします。

Proで解禁されたモジュール郡の最後にLottieがあるので適当なエリアにD&Dします。

「ファイルをアップロードするには・・・」の部分をクリックすると、メディアアップローダーが立ち上がりますが、初回時、「許可されていないフォーマット・・・」とアラートが出ます。これは、JSON形式のファイルは初期設定で許可されていないため出るアラートなので、許可して大丈夫です。

ステップ2で作成したJSONファイルをドラッグ&ドロップすると

このように表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です