ブログでは僕が考えたことを、基本的に考えた順に書いています。
他のページよりも気軽に書かせてもらってます。
ご了承の上、お読みいただければ幸いです。
他のページよりも気軽に書かせてもらってます。
ご了承の上、お読みいただければ幸いです。
Lottieとは
Airbnbが開発しているアニメーションライブラリです。
以下のようなアニメーションをWeb上で動かすことができます。
動画ファイルがjson形式（+画像ファイル）であるため、読み込みが軽く、javascript（やTypeScript）から容易に編集できるのが特徴です。
今回のアニメーションは以下のjsonファイルでできています。
animations/tanuki/data.json (GitHub)
Lottie + After Effects
以下の「AEで作ったアニメーションをLottieでお手軽にWebで使う」を参考にしました。
AEで作ったアニメーションをLottieでお手軽にWebで使う
After Effectsが使えない方も！
Adobe After Effectsが使えない方もLottieのファイルを取得したりなんだりでいろいろできます。
いっぱい情報がネットにあるので、興味があればぐぐってください。
Nuxt3とは
ウェブサイト構築用のフレームワークVue.jsのフレームワークNuxtの最新版です。
いっぱい情報がネットにあるので、興味があればぐぐってください。
Lottie + +Nuxt3
以下の「Nuxt.jsでLottieを使う」を参考にしました。
Nuxt3への実装は以下のようにしています。
補足：YesNo診断
今回のアニメーションは以前のブログで書いたYesNo診断用です。
今回はLottieのお試しとして作りましたが、少しずつユーザー動作に合わせて動きが変化するなど、改造していく予定です。
なぜ白いたぬきなの？
ソード・ワールド2.5サプリメント『泡沫世界モノクロマティカ』にあわせてということにしています！
本当のところは、ホワイトデーに作成した画像の流用だからです……。
おまけ：OGP自動生成
当ブログではOGP自動生成をしています。
sharpというnpmパッケージを使用しています。
読みにくいコードですが、一応紹介しておきます。
……いつかリファクタリングします。
