アニメーションライブラリのLottieを使ってみたときの備忘録。
フリーで使えるアニメーションはLottieFilesで公開されてる。
インストール
$ npm i lottie-web
表示用のコンポーネントの準備
表示するコンポーネント(LottieView)の用意。
マウントされたらlottie.loadAnimation()を呼び出してロードしてる。
<template> <div :style="style" ref="LottieView" /> </template> <script lang="ts"> import lottie, { AnimationItem } from "lottie-web"; import { Component, Prop, Vue } from "nuxt-property-decorator"; @Component export default class LottieView extends Vue { @Prop({ required: true }) path!: string; @Prop() width!: number; @Prop() height!: number; @Prop({ default: true }) loop!: boolean; @Prop({ default: true }) autoplay!: boolean; @Prop() rendererSettings!: any; private style = { width: this.width ? `${this.width}px` : "100%", height: this.height ? `${this.height}px` : "100%", overflow: "hidden", margin: "0 auto", }; private anim: AnimationItem | null = null; mounted() { if (!process.browser) return; console.info(`mounted: ${this.path}`); this.anim = lottie.loadAnimation({ container: this.$refs.LottieView as any, renderer: "svg", loop: this.loop, autoplay: this.autoplay, path: this.path, rendererSettings: this.rendererSettings || undefined, }); } } </script>
ライブラリの使い方は、以下のページに。
・Web | Lottie
this.animを使って、再生/停止などをコントロールできる。
this.anim.play() this.anim.stop() this.anim.pause()
addEventListener()を使ってイベントを受け取ることもできるよう。
使い方
呼び出し側はこんな感じ。
<template> <div> <LottieView path="/sample.json" width="150" height="150" /> </div> </template>
以上!! 簡単(´ω｀)
