TECHNOLOGY
- Nuxt.js/Vue.js

2024.02.29

【Nuxt 3】 Lottieを使ってリッチなアニメーションを表示（オープニング・ボタンアニメーション）

こんにちは！ハコザキです。

Webサイトにアニメーションを表示することは、
ユーザーにとって見栄えが良くなり、より魅力的なものになります。
より魅力的なアニメーションを実現するとなれば、それなりに手間がかかるかと思います。

そこで、Lottieというサービスを使用してみたところ、
魅力的なアニメーションを簡単に実現できることがわかりました。
本記事では、Nuxt3上にLottie製のアニメーションを表示する方法を紹介します！

Lottieとは

Lottie は、JSON ベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottie はどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。
https://lottiefiles.com/jp/what-is-lottie

出力されたJSONファイルを読み込むことで、ブラウザにリッチなアニメーションを表示できます。

Lottieのメリットについて

Lottieを使用することのメリットは、以下の通りです。

ファイルサイズが小さい
JSONファイル形式で出力されるため、GIFやMP4に比べファイルサイズが小さいです
拡大縮小しても劣化しない
ベクターベースのアニメーションであるため、拡大縮小しても解像度が劣化しません
マルチプラットフォームのサポートとライブラリ
iOS、Android、Webなど、さまざまなプラットフォームでサポートされています
インタラクティブ（アニメーションの制御が簡単）
スクロールやクリックなど、ユーザーの操作に応じてアニメーションを制御することが簡単にできます

LottieFilesとは

LottieFiles は Lottie の作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。
https://lottiefiles.com/jp/what-is-lottie

LottieFilesを利用して、一からLottieアニメーションを作成することもできますが、
他のユーザーがLottieFilesで作成したLottieアニメーションをダウンロードして使用することもできます。
無料のLottieアニメーションは、すべてクリエイティブコモンズライセンスの下で提供されているため、ダウンロードして使用できます。

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

他のユーザーが作成したLottieアニメーションをダウンロードして使用する方法を紹介します。

まずは、LottieFilesのCommunityページへアクセスします。
Featured animations from our community

サインアップしていない場合は、サインアップを行います。
続いて、使用するアニメーションを選びます。

今回は、以下のアニメーションを使用します。
https://lottiefiles.com/animations/dynamic-tri-cubes-J9No6WfSjK

Downloadボタンをクリックし、save to workspace to downloadボタンをクリックして
アニメーションをLottieFilesのワークスペースへダウンロードします。

続いて、LottieFilesのワークスペースへアクセスしダウンロードしたアニメーションを選択します。
右側にDownload&exportという項目があり、ここから各種JSONや他のフォーマットでダウンロードできます。
今回は無料で使用するため、一番上のLottieJSONを選択します。
※有料プランに加入するとより軽量化されたものを使用できます。

Nuxt 3 で Lottie を使用する

ここまでで、Lottieアニメーションをダウンロードすることができました。
続いて、Nuxt3でLottieアニメーションを表示する方法を紹介します。

Nuxt環境でLottieを使用するにあたり、vue3-lottie というライブラリを使用します。

今回のデモでは、ページにアクセスすると
Lottieアニメーションが表示されるようなサンプルを作成してみます。

事前準備

まずは、Nuxt3プロジェクトを作成します。

npm create nuxt-app nuxt3-lottie
cd nuxt3-lottie

ライブラリインストール

vue3-lottieは、LottieアニメーションをVue3で使用するためのライブラリです。
Nuxt3で使用することもできるため、今回はこちらのライブラリを使用します。
vue3-lottie公式ドキュメント

npm add vue3-lottie

plugins設定

vue3-lottieをNuxtプロジェクトで使用するために、プラグインを設定します。
クライアントサイドでのみ実行させるため、pluginsディレクトリを作成し
lottie.client.tsファイルを作成します。

import { Vue3Lottie } from "vue3-lottie"

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.component("Vue3Lottie", Vue3Lottie)
})

assetsディレクトリにLottieアニメーションを配置

LottieFilesからダウンロードしたJSONファイルを、assetsディレクトリに配置します。
今回はassets/lottie/loading.jsonというファイル名で配置しました。

Lottieアニメーションを表示するコンポーネントを作成

componentsディレクトリに、Lottieアニメーションを表示するコンポーネントを作成します。
components/OpeningAnimation.vueを作成し、コードは以下の通りに記述します。

<script setup lang="ts">
import BoxJson from '~/assets/lottie/loading.json'
</script>

<template>
  <div class="centered">
    <ClientOnly>
      <Vue3Lottie :animationData="BoxJson" :width="500" :height="500" />
    </ClientOnly>
  </div>
</template>

<style scoped>
.centered {
  height: 100svh;
  display: grid;
  place-items: center;
}
</style>

JSONファイルをimportし、pluginsで登録したVue3Lottieコンポーネントを使用して
アニメーションを表示しています。
Vue3Lottieコンポーネントには、animationData、width、heightのpropsを渡しています。

animationData : 読み込むアニメーションのJSONオブジェクト
→ 読み込むアニメーションのURLを指定したい場合は、animationLinkを使用します
width : Lottieアニメーションの幅
height : Lottieアニメーションの高さ

その他にも、以下のようなpropsがあります。詳しくは公式ドキュメントを参照してください。

loop : アニメーションをループさせるかどうか
autoplay : 自動再生するかどうか
speed : アニメーションの再生速度
playOnHover : ホバー時に再生するかどうか

ページでLottieアニメーションを表示

ページ側に作成したコンポーネントを表示します。
pages/index.vueを以下のように編集します。

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const isOpening = ref(true)
const durationMs = 3000

onMounted(() => {
  setTimeout(() => {
    isOpening.value = false
  }, durationMs)
})
</script>

<template>
  <transition>
    <OpeningAnimation v-if="isOpening" />
    <main v-else>
      <h1>Home</h1>
    </main>
  </transition>
</template>

<style scoped>
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease-in-out;
}
</style>

今回は、ページが表示された直後にLottieアニメーションを表示し、
3秒後に非表示にするような処理を実装しています。
オープニングアニメーションを非常に簡易的に実装しています！！

最終的に以下のような画面が表示されるはずです。

ボタンhover時のアニメーションを実装

ボタンをhoverした際にアニメーションを表示するような処理を実装してみます。

Free Button Animations | LottieFiles

上記のサイトから、好きなアニメーションをダウンロードし、assets/lottieディレクトリに配置します。
今回はチェックマークのアニメーションを使用します。
https://lottiefiles.com/animations/icons-success-done-TxxtnSFGRm

続いて、componentsにボタンコンポーネントを作成します。
ファイル名はCheckButton.vueとします。
以下のようなコードを記述します。

<script setup>
import CheckIconJson from '~/assets/lottie/check-icon.json'

const lottieAnimation = ref(null)

// hover時は通常再生
const handleMouseOver = () => {
  lottieAnimation.value.setDirection('forward')
  lottieAnimation.value.play()
}

// hover解除（要素から離脱）時は逆再生
const handleMouseLeave = () => {
  lottieAnimation.value.setDirection('reverse')
  lottieAnimation.value.play()
}
</script>

<template>
  <ClientOnly>
    <button
      class="check-button"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
    >
      <Vue3Lottie
        ref="lottieAnimation"
        :animationData="CheckIconJson"
        :width="48"
        :height="48"
        :speed="2"
        :scale="1.5"
        :autoPlay="false"
        :loop="false"
      />
      <span>Check</span>
    </button>
  </ClientOnly>
</template>

<style scoped>
.check-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #18c17b;
  border-radius: 8px;
  border: 2px solid #18c17b;
  background-color: transparent;
  cursor: pointer;
}
</style>

ボタンをhoverした際にアニメーションが再生されるような処理を実装しています。
hover時はアニメーションを通常再生、hover解除時は逆再生するような処理を実装しています。
このコンポーネントを表示するとデモのような画面が表示されるはずです！！