LottieアニメーションをWEBページに配置しよう! lottie-player編

動きのあるリッチなWEBサイトを作りたい！ でも重いページはヤダ！
古参コーダーには聞きなれないLottieアニメーションですが、簡単、軽量、劣化も無し！　ただしIE非対ですが、もういいでしょ！ てことで、おぼえましょう、学びましょう。

Lottieとは？ どう優れてるの？ どうやってオリジナルのLottieアニメーションを作れるの?といった概要は、上記Photoshop VIPさんの記事を参照ください。

この記事では、デザイナー向けのアニメーションの作成方法ではなく、コーダー向けのWEBページに実装する方法を取り上げます。
Lottieが提供しているlottie-playerを使うと、コードを貼り付けるだけでとても簡単に設置ができます。

Lottieにログイン！

さくっとLottieのサイトに行って、Googleアカウントでも何でもお好きにサインアップします。
Lottieのサイトに上がってるアニメーションを使う分にはサインアップしなくてもいいんですが、オリジナルで作成したLottieアニメーションを配置したい場合はログインしてマイページからあれこれするので、コーダーは素直にサインアップしましょう。お知らせメールがたまに来るくらいです。

使いたいLottieアニメーションはこれだ！

A: 使いたいLottieアニメーションをLottieのサイトから選ぶ

グロナビのDiscoverからFree Animationsへ。URLはこちら。

フリーで使えるアニメーションがたくさんありますね。数が多いので検索を駆使して絞り込みましょう。
この記事では2ページ目にあったアニメーションを実装してみます。

エメラルドグリーンのCopy Codeボタンをクリックして、lottie-playerのコードをコピーし、WEBページの配置したい箇所にペーストします（位置やサイズ調整を考えると、任意の親要素で囲んでおくと調整しやすいかと）。
上のキャプチャではチェックしたまんまですが、Control（コントロールバーの表示）のチェックはデモページでは外しています。
流れ作業で読み込みたくなるjQueryも不要です。

Lottieアニメーション実装デモページ

WordPressの投稿記事内にもそのままコードをペーストで、Lottieアニメーションが表示されますね。
コード吐き出し画面にあったHeight: 300px;をそのままにしていたため、無駄に高さに余白が出てしまっています。Control等、チェック項目も含め、コード上でも編集できるので、ここは適時調整しましょう。

また、Lottieアニメーションは、そのままページローディングに使うこともできます（こちらの記事の下の方にデモページがあります）

B: 使いたいオリジナルのLottieアニメーションをアップロードする

この記事を書いている時点では、Lottieアニメーション作成方法をまだ覚えていません。なので、デザイナーからデータを貰ったという仮定で進めます。そのためにはローカル環境にLottieアニメーションのファイルがあるところからやりたいので、ちょっと話がズレてしまいますがーーー、

フリーのLottieアニメーションをダウンロードする

気に入ったアニメーションをクリックでモーダルを開いたら、右上のDownloadからLottie JSONを選びます。拡張子が.jsonなので最初は面食らいますが、これがLottieアニメーションファイルになります。

アップロードする

マイページのMy Private Animationsに移動します。

この画面にLottieアニメーションファイルをドラッグしてアップロードします。

アップ後のアニメーションをクリックしモーダルを開き、アセットのリンクを取得します。

以下のページに移動しましょう。

最初はダミーのアニメーションが動いてますが、先程のURLをペーストするとアニメーションが切り替わります。
「Copy Code」で吐き出されたlottie-playerのコードをコピーして貼り付ければOK!

貼り付けた結果が以下の通り。


本当に簡単、軽い、きれい、と3拍子揃ってますね。
IEでは該当箇所が空白になるので、必要であればCSSハックでIEでのみ表示させる静止画像を配置するなど対応しましょう。

After Effects勉強中

その後、こちらの本を買って勉強中です。

プロが教える！ After Effects アニメーション制作講座 CC対応 [ 月足直人 ] 価格：3520円（税込、送料無料) (2022/5/15時点) 楽天で購入

After Effectsを起動して、画面のほとんどが分からない初心者の私にピッタリで、丁寧に画面キャプチャと解説が記されており置いてけぼりにされません。簡単な動画を作っていきながら、徐々にできることが自然に増えていく素晴らしい入門書です。
3,520円（税込）というお値段も、技術書なら並レベル。
これまでオンラインセミナーで、「わぁ…すごい。やってみよう。…うまくできない。どうだっけ？ うーん…検索しようにも技術系サイトの内容に自分のレベルが追いついてなくて理解できない……」と途中で筆を投げること多数だったけれども、ちょっとレベルが上がって、ドラクエ3で例えるとアリアハンを抜ける洞窟にたどり着いた感じです。

After Effectsで作った動画ならなんでもLottieファイルにできるわけではないんですね。
どこまでできて、どこからできないのか把握しておくことで、後々の事故（「どうしてできないの？」「何でできないの？」と詰められて、ちゃんと解答するために調査や試行錯誤を繰り返し、工数がどろどろに溶ける）が防げそう。もっと経験値積まなきゃ。