vue-spine v0.0.1

vue-spine

这是一个vue中使用的spine动画组件

使用方式

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

  // 根据动画名加载资源
  const animSource = computed(() => {
    // 建议放置在public中， 本地文件路径动态时若有问题建议，获取其中一个，再replace对应名称
    const atlas_href = new URL(`assets/name.atlas`, import.meta.url).href;
    const json_href = new URL(`assets/name.json`, import.meta.url).href
    return {
      atlas: atlas_href,
      json: json_href,
    };
  });
  // 效果动画ref
  const effectAniRef = ref(null);
  // 效果动画状态监听
  const animStatusChange = (status: "start" | "interrupt" | "end" | "dispose" | "complete" | "event", _entry: any, _event: any) => {
    console.log("animStatusChange", status);
  };
</script>

<template>
  <div style="width: 100px;height: 100px;">
    <spine-item
      ref="effectAniRef"
      class="anim_effect"
      animation="animation"
      :loop="false"
      :atlas-url="animSource.atlas"
      :json-url="animSource.json"
      :animStatusChange="animStatusChange"
    ></spine-item>
  </div>
</template>