ThemifyのLottieアニメーションで何ができるのか？について紹介します。
前回の記事「Lottieアニメーションとは？」の記事でも紹介しましたが、Lottieは注目のWEBサイトのアニメーション技術です。ただ、導入したくても、JSONファイルの組み込みが必要であったため、知識がない人には敷居が高いというのが導入の課題でした。
しかし、Themify BuilderのようなLottieアニメーションを設置できるプラグインが登場したことにより、その課題が解決し、誰でも簡単にLottieアニメーションをWEBサイトに設置できるようになりました。
今回はその立役者でもあるThemifyを使って、どのようなLottieアニメーションを設置できるのか？を紹介していきます。
目次
ThemifyのLottieアニメーションの概要
ThemifyのLottieアニメーションの機能を紹介する前に、Themify Lottie Animationモジュールがどのように機能しているのか？を紹介します。
Lottie Library
ThemifyのLottie Animationモジュールを使えば、誰でも簡単にLottieをWEBサイトに設置できますが、その理由はLottie Libraryにあります。
Lottie Libraryとは、既に作成されている無料のLottieアニメーションリストです。
”誰でも簡単にできる”大きな理由は、そのすでに作成されているアニメーションがたくさん用意されているからです。
そのため、自分で頑張ってLottieアニメーションを作る必要がなく、Lottie LibraryからLottieを選択するだけなので、誰でも簡単に、WEBサイトにLottieアニメーションを設置できるのです。
実はこの、Lottie LibraryはThemifyが用意したものではなく、LottieFilesが公開しているものを利用する仕組みになっています。（ElementerもLottie Filesを利用しています。）
JSONファイルアップロード対応
もし、Lottie LibraryでイメージするLottieアニメーションが見つからない場合は、自作で作成したり、他サイトで作成したJSONファイルをアップロードすることもできます。
アップロードするのに、HTMLやCSSなどの操作が不要で、Imageファイルと同様の手順で行うだけという簡単な方法なので、マウスクリック数回で設置できてしまいます。
ある意味この機能だけでも、Lottie Animationを使いたくても使えなかった人にとっては十分かもしれません。（Lottie Libraryは神・便利機能です！）
Lottie Icon機能が追加
Lottie Animationモジュール以外にも、Lottieアニメーションを設置できます。
例えば、Button、Fancy Heading、Icon、Cart Icon、FeatureなどのモジュールでもLottieアニメーションを追加できるようになりました。
これにより、より個性的なアニメーション動作を行うWEBサイトが作りやすくなりました。
ThemifyのLottieアニメーションのトリガーとオプション
ThemifyのLottie Animationモジュールでは、アニメーションを動作させるためのトリガー（Play On）がいくつかあります。
トリガーごとに対応するオプションが若干変わるので、トリガーごとにどんなことができるのか？を紹介します。
Lottie Animationの基本オプション
Animationのオプションはトリガーごとに対応するオプションが若干変わ理ますが、基本的なものは大体同じなので、紹介します。
count
アニメーションが動作する回数。かと思いますが、私の環境では、正しく動作しないため、違う意味があるかもしれません。
Speed
アニメーションが動作する速さを設定できます。数値を大きくすればそれだけ速い動作になります。
Reberse
アニメーションを逆再生させます。
Play Frames
選択したフレーム間でアニメーションを再生させます。つまり、好きな動作の部分からアニメーションを開始できるとともに、好きな動作の部分でアニメーションを終了させることができます。
Delay
次の動作（ループアニメーションもしくは、次のアニメーション）が開始するまでの間の時間を設定できます。
Render
Lottie ファイルの一部の機能は、特定の形式ではサポートされない場合があります。その場合はLottie ファイルに応じて形式を選択します。ただし、基本的にはSVGから変更する必要はありません。
Lottie Animationのトリガー
OnLoad
Lottieファイルをロードした時にアニメーションを再生します。
Click
動作対象をクリックすることで、アニメーションが動作します。
オプションのCSS Selectorには、アニメーションをトリガーする要素のCSS セレクター (「.custom-class」または「#id-name」など) を入力します。空の場合、このモジュールが使用されます。この機能を使えば、例えば、”ボタンをクリックした時にアニメーションが動作する”という設定ができます。
オプションのCountでは、「何回クリックしたらアニメーションを動作させるのか？」を設定できます。
Hover
動作対象をマウスホバーすることで、アニメーションを再生します。ホバーをやめる（マウスアウトする）と、アニメーションは停止します。
オプションのCountでは「何回ホバーしたらアニメーションを動作させるのか？」を設定できます。
また、CSS Selectorも設定できます。
Hover & Reverse
ホバーするとアニメーションが始まります。マウスアウトするとアニメーションが反転（逆再生）し停止します。
Hover & Pause
ホバーするとアニメーションが始まります。マウスアウトするとアニメーションが停止します。
Progress Animation
Lottieコンテンツの上でマウスカーソルを移動するとアニメーションが進行します。
Scroll
スクロールすることでアニメーションが動作します。
オプションのVisibilltyで選択したビューポート範囲に要素が表示されると、「イベント」アクションがトリガーされます。
オプションのEventでは”Progress Animation”と”Play”が選択できます。
“Progress Animation”は、スクロールに合わせてアニメーションが進行します。下にスクロールするとアニメーションが進行し、上にスクロールすると逆再生のアニメーションが進行します。これに対し、”Play”は、少しでもスクロールすると、アニメーションをすべて再生します。
Product add cart
WooCommerce製品がカートに追加されるときにアニメーションを再生します。
Do not play
アニメーションは再生されず、静止画像のように動作します。
ThemifyのLottieアニメーションのデモ
ThemifyのLottieアニメーションを使えばどんなことができるのか？それはThemifyのLottieのデモを一度チェックしてみれば一目瞭然ですが、全て英語なので、今回は、デモサイトを真似して作成した日本語版デモページを紹介します。
このデモページを作成する際に、ほぼ初めてLottie Animationモジュールを操作しました。作成時間は大体1時間くらいですが、大半はLottie Libraryからアニメーションを選ぶのにかかった時間です。（最初はThemifyのデモページと同じLottieアニメーションを選択したかったのですが、探すのに時間がかかりすぎるので断念しました。）
Themify Lottieアニメーション機能のまとめ
以上、ThemifyのLottieアニメーションモジュールの機能を紹介しました。
私の印象としては、初めての操作でも簡単にWEBサイトにLottieアニメーションを追加できる素晴らしい機能をThemifyは追加してくれたと感じます。
ただ、Lottieアニメーションを設置するよりも、Lottie Library（LottieFilesのデータ）から、希望するアニメーションを探すことに大幅に時間を取られるので注意が必要です。
ぜひ、ThemifyのLottieアニメーション機能を使って、動きのあるWEBサイトを作ってみてください。
