LottieとElementorとWordPress

近頃、モダンなWebサイトで超高解像度なモーフを見ることが増えてきました。

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

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

  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ファイルをD&Dすると

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

コメントを残す

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

勝手マニュアル更新中

進捗状況 24.8%

Minoru Nitta(父)

Tetsuro Nitta(長男)