はじめに

Vue.js で Lottie を使ったアニメーションを表示する方法。

Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。

※Latest commit は 2020/09/28 時点の確認結果

TL;DR

  • npm i lottie-web でインストール
  • lottie-web と JSON データを import
  • lottie.loadAnimation を実行
  • Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
      1. 基本形
      2. イベントハンドラ
  5. その他・メモ
    1. Creative Commons License について
  6. まとめ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls vue lottie-web
├── lottie-web@5.7.3
└── vue@2.6.11

詳細

セットアップ

npm i でインストール

1
$ npm i lottie-web

使い方

アニメーションは LottieFiles の Check okey done を使用。

JSON としてダウンロードして適当な場所に配置しておく、今回は src/assets 直下に配置した。

基本形

lottie-web と対象アニメーションデータ(JSON)を import して、lottie.loadAnimation を実行。

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="lottie" ref="lottie"></div>
</template>

<script>
import lottie from 'lottie-web';
import animationData from '@/assets/33886-check-okey-done.json';

export default {
  mounted() {
    lottie.loadAnimation({
      container: this.$refs.lottie, // document.getElementbyId('lottie') などでも OK
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData,
    });
  },
};
</script>

lottie.loadAnimation で使用可能なオプションは以下を参照。

イベントハンドラ

参考: Events

onComplete などのイベントへハンドラを設定可能。利用可能なイベントは以下。

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

loadAnimation の戻り値(インスタンス)に対して、onComplete = func で設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import lottie from 'lottie-web';
import animationData from '@/assets/33886-check-okey-done.json';

export default {
  data() {
    return {
      animation: null,
    };
  },
  mounted() {
    this.loadAnimation();
    this.animation.onComplete = this.onComplete;
  },
  methods: {
    loadAnimation() {
      this.animation = lottie.loadAnimation({
        container: this.$refs.lottie,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData,
      });
    },
    onComplete() {
      console.log('on complete');
    },
  },
};

その他 addEventListener でも設定できる(っぽい。こっちは動作未確認)

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready: when initial config is done
  • data_ready: when all parts of the animation have been loaded
  • data_failed: when part of the animation can not be loaded
  • loaded_images: when all image loads have either succeeded or errored
  • DOMLoaded: when elements have been added to the DOM
  • destroy
1
2
// たぶんこんな感じ
document.getElementById('lottie').addEventListener('complete', () => {});

その他・メモ

Creative Commons License について

利用にあたってライセンス表記が無いと問題になる(と思われる)ので、以下ページなどを参照。

まとめ

  • npm i lottie-web でインストール
  • lottie-web と JSON データを import
  • lottie.loadAnimation を実行
  • Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list