一部のアニメーションでLottieを使っているけど、
軽量版があるっぽいので試してみた(*´ω`*)
もとのコンポーネントはこの記事のやつ。
軽量版を利用したコンポーネント
<template> <div :style="style" ref="LottieView" /> </template> <script lang="ts"> - import lottie, { AnimationItem } from "lottie-web"; + import { AnimationItem } from "lottie-web"; + import { default as lottie } from 'lottie-web/build/player/lottie_light'; import { Component, Prop, Vue } from "nuxt-property-decorator"; @Component export default class LottieView extends Vue { // ...略 } </script>
軽量版は、SVGレンダラーのみ対応しているバージョンのよう。
サイズが半分くらいになるので、こっちを使うのが良さそう(*´ω`*)