目次
Lottieの使い方
LottieをWEBサイトに実装する方法は主に2種類あります。一つはnpmやCDNでLottie.jsを読み込み使用する方法で、もう一つはiframe要素を使用する方法です。実際に読み込んでみたものがこちらです。
見た目の動きに大きな違いはありませんが、この二つの方法の違いとして、npmやCDNで読み込む方法では、Lottieのサイトに上げたjsonファイルも、ローカルに保存したjsonファイルも動かすことができます。そのため、JavaScriptなどでアニメーションを細かく制御することができます。HTML要素にdotlottie-player要素でjsonファイルを読み込む方法と、JavaScriptに直接jsonファイルのパスを記述する方法があります。
一方iframeはあらかじめLottieのサイトでアニメーションをつけたjsonファイルを読み込んでいるだけなので、細かい調整はできません。そのため、ローカルにjsonファイルを配置しただけでは動きません。
今回はCDNを使用してアニメーションを制御していきたいと思います。
アニメーションを制御する
ホバー
まずは、マウスホバーしたときにアニメーションがつくようにしたいと思います。シチュエーションとしては、WEBサイトでメニューにマウスホバーしたとき、色が変わったり下線が出たりするように、メニューのアイコンも動かそうというものです。このようにホバーでアニメーションをつけることができました。
コードもとてもシンプルで、対象のLottieファイルを指定し、ホバーすれば動き、離れれば止まる、という数行のコードのみです。
（ホバーしたとき歯車の色を変えるのは、jsonファイルをローカルに保存し、書き換える必要があるようなので今回はスルーします。）
他にもLottieは逆再生やアニメーションの連動などもできます。
逆再生
次は逆再生です。シチュエーションとしてはハンバーガーメニューのアイコンをクリックしたときなどです。同じアニメーションをcssでも書いて比較してみます。このようにcssでは線の一つ一つに対してコードを書かなければならず、複雑で管理が難しくなります。ですが、Lottieを使えば簡単に複雑なアニメーションを実装することができます。
連動
最後はアニメーションの連動です。シチュエーションはLPなどでイラスト付きで手順の説明をするときなどに、イラストにアニメーションをつけるというものです。最初のアニメーションが終わったら自動的に次のアニメーションを再生します。今回はLotieサイトに初めから登録されている3つのアニメーションを使って作成します。このようにアニメーションをつけることでサイトの情報量を簡単に増やすことができます。
もちろん、サイトをスクロールしてコンテンツがウィンドウ内に入ってきたらアニメーションを再生し、ウィンドウ外に出たらアニメーションフレームをリセットする、なんてこともできます。
まとめ
今回はLottieで作成したアニメーションを実際にWEBサイトに組み込んでみました。簡単にサイトをおしゃれにし、コンテンツの情報量を増やすことができます。複雑なコードを書かなくてもアニメーションをつけられるため、とてもハードルが低く、簡単にWEBの表現の幅を広げることができます。最後までお読みいただきありがとうございました。
また来月のLabでお会いしましょう。
それではまた。
