Wood-Roots:blogHOMEJavascript202002/06Lottieを使ってマイクロインタラクションを実装してみるJavascriptLottieはAirbnbが開発しているアニメーションライブラリです。Airbnb本体のサービスにお世話になることは多分ないと思いますが(旅行行かないので...)、Lottieは非常になめらかで自由度の高いアニメーションを作ることができそうですので試してみました。デモADs基本的な使い方はじめに断っておきますが、AfterEffectsは使わずLottieFilesで公開されているJSONを使用した利用方法です。Aeは難しかった...今後の課題とします。Lottieの読み込みscriptタグでLottie本体を読み込みます。type="text/javascript"></script>Javascript最小構成はこれだけです。containerで指定した要素の内側にSVG(rendererオプションで「canvas」と「html」も選べます)が展開され、アニメーションが表示されます。true});LottieFilesLottieFilesではLottieで使える様々なアニメーションが公開されています。今回はその中で以下のものを使わせていただきました。今回はマイクロインタラクション的な使い方を試してみます。デモではVue.jsを合わせて使用しています。フォームのバリデーションhttps://wood-roots.com/wp-content/uploads/2020/02/validate.mp4フォームに入力し、バリデーションに成功したらチェックマークが表示されるというものです。trueとしています。</div></div></div>正規表現による電話番号のバリデーションも本気でやるととてもややこしいですので、今回は簡易に00000-0000-0000でOKとしています。true;});},}computedが絡む場合、mountedでLottieによるアニメーションの構築が完了する前にcomputedの評価が発生してしまい、変数がundefinedになるなどのエラーが出ます。Promiseによりアニメーションの構築が完了を判定するフラグを設定するようにしています。クリックで再生、もう一度クリックしたら逆再生(いいねボタン)https://wood-roots.com/wp-content/uploads/2020/02/like.mp4いいねやお気に入りなどで使えそうな、クリックしてアニメーションするハートのアイコンです。HTMLは空のdivだけです。class="like"></div>クリックで「liked」というクラスをトグルし、再生方向を制御しています。実際に利用する場合はこのメソッドにいいねを保持するPOST処理が入ることになります。false);});},フォームにフォーカスしたら再生、外れたら停止https://wood-roots.com/wp-content/uploads/2020/02/focus.mp4フォームにフォーカスするとアニメーションが再生され、外れると停止します。入力中であることを明示したり、インクリメンタルサーチなどの場合は検索結果の取得待ちのときに表示させるなどの使い方ができると思います。false);},ボタンをクリックしたらローディング→完了するとチェックのアニメーションhttps://wood-roots.com/wp-content/uploads/2020/02/button.mp4メールフォームや小さなデータの送信なら一瞬で終わるので必要のない配慮ですが、大きなデータを送信する場合は処理が進んでいることを明示したほうが親切です。クリックしたらローディングのアニメーションが無限ループで再生され、完了したらチェックのアニメーションになるというものです。class="submitFinish"></div></div></button>擬似的にsetTimeoutで完了まで5秒待つということにしています。実際はデータを送信し、Promiseのthen()やfinally()で完了と判定します。5000);}まとめ:簡単に高品質なアニメーションを使えるが、やはりAeが使えないと厳しいLottieFilesには総ページ数から計算したところ8500件程度のアニメーションが公開されていますが、だからと言って自サイトにぴったり合うものが必ず見つかるとは限りません。「いいね」や「カートに入れる」などの汎用的なものは問題なさそうですが、「無表情から涙を流す顔文字」みたいなものはしっくり来るものがありませんでした。いうことで、AfterEffectsの習得が直近の課題となりました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。