みなさんこんにちは！
イザナギです！最近はPythonで何か作ったり、実験ばかりしていました。
でも、あんまりいいのできてなかったんですよねwww
なので、気分転換としてNuxt.jsを使ってポートフォリオサイトを作成し直してみることにしました！
Nuxt.js - ユニバーサル Vue.js アプリケーション
基本デザインは何も変えずに作るので、そんな時間かかんないかな？
でも、一工夫加えたい！
そうだ！アニメーションをつけよう！
という感じでアニメーションをつけてみることにしました。
そこで何を使うのがいいかなと考えていると、「Lottie」をというライブラリを見つけました。
なので、今回は「Lottie」を紹介していきたいと思います。

Lottieとは？

あの有名なAirbnbが開発した、アニメーションライブラリです。
Lottie
様々なアニメーションがあり、以下のサイトには作成されたファイルもあります。
Free Lottie Animation Files, Tools & Plugins - LottieFiles

サイトをさらっとみてみると結構いろんなアニメーションがアップロードされていました。
　

ダウンロード形式もMP4やgifの他にJSONも選べます。
JSONが選べるのはありがたいですね！
MP4やgifが重くてアプリケーションに搭載しずらかった人も、JSONファイルであれば軽量に搭載しやすくなるのはすごくいいですね！
また、サイトにあるアニメーションじゃなくても「After Effects」で作成したアニメーションを「bodymovin」でJSON化したものもLottieで利用できます。
今回は「After Effects」を利用せずに、サイトからお借りしたものを利用していきます。

実装

では早速実装してきたいと思います！
まずは利用したいアニメーションをサイトからJSON形式でダウンロードしましょう！
ダウンロードしたものをNuxt.jsで作成したアプリケーションの以下のディレクトリに配置します。