Help us understand the problem. What is going on with this article?

Nuxt.jsでLottieアニメーションをページローディングで使う

More than 1 year has passed since last update.

これは

lottieで作ったアニメーションをNuxt.jsのページローディングで使う方法。

まずlottieで読み込むアニメーションファイルを作成。
ここでは、loading.jsonというファイルで用意した。
保存先はassets/animation/loading.json

https://lottiefiles.com/
(サイトに様々なexampleが用意されているので参考に)

player installation

lottieをwebで使うためにlottie-webというnpmをinstallする。
see https://github.com/airbnb/lottie-web

with npm
npm install lottie-web

with yarn
yarn add lottie-web

loading animation component

jsonを読みこむコンポーネントの作成。
使用する際はコンポーネントのjsonを用意したファイルに書き換えると良い。

loading.vue
<template>
  <div v-show="loading" class="loading">
    <div class="anim" ref="lavContainer"></div>
  </div>
</template>

<script>
import loading from "@/assets/animation/loading.json";

export default {
  data: () => ({
    loading: false
    options: {
      animationData,
      loop: false,
      autoplay: false,
      rendererSettings: ""
    };
  }),
  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: "svg",
      loop: this.options.loop !== false,
      autoplay: this.options.autoplay !== false,
      animationData: this.options.animationData,
      rendererSettings: this.options.rendererSettings
    });
  }
  methods: {
    start() {
      this.anim.play();
      this.loading = true;
    },
    finish() {
      this.anim.stop();
      this.loading = false;
    }
  }
}
</script>

<style scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
  z-index: 9999;
}

.anim {
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
  width: 100px;
}
</style>

loading config setting

nuxt.config.jsに作成したコンポーネントを指定する。
これでページネーション時のアニメーションが実行される。

nuxt.config.js
export default {
  loading: '~/components/loading.vue'
}

https://twitter.com/keng0o_

keng0o
alu-inc
アルは、マンガファンがもっとマンガを楽しめるサービスを作るために立ち上げられた、テクノロジー企業です。
https://alu.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away