更新记录

1.0.0（2026-04-28） 下载此版本

init

平台兼容性

uni-app(4.86)

其他

c-spine Spine动画组件

基于 uni-app 的多平台 Spine 动画组件，支持 H5、APP-PLUS 和小程序平台。

特性

• ✅ 多平台支持：H5、APP-PLUS、MP(小程序)
• ❌ MP(小程序暂不支持)
• ✅ 完整动画控制：播放、暂停、切换动画
• ✅ 事件监听：加载完成、动画完成、循环播放
• ✅ 响应式设计：自适应容器尺寸
• ✅ 资源管理：自动清理和释放资源

安装

确保已在 package.json 中安装依赖：

{
  "dependencies": {
    "@esotericsoftware/spine-player": "^4.2.82",
    "@pixi-spine/runtime-4.1": "^4.0.6",
    "@pixi/assets": "^7.4.3",
    "pixi.js": "^8.10.1"
  }
}

使用方法

基本用法

<template>
  <view>
    <c-spine 
      :jsonUrl="jsonUrl"
      :atlasUrl="atlasUrl"
      :animation="animation"
      :loop="loop"
      :autoplay="autoplay"
      :showLoading="true"
      :loadingText="loadingText"
      @loaded="onLoaded"
      @complete="onComplete"
      @loop="onLoop"
      @error="onError"
    />
  </view>
</template>

<script>
import cSpine from '@/uni_modules/c-spine/components/c-spine/c-spine.vue'

export default {
  components: { cSpine },
  data() {
    return {
      jsonUrl: '/static/spine/hero.json',
      atlasUrl: '/static/spine/hero.atlas',
      animation: 'idle',
      loop: true,
      autoplay: true,
      loadingText: '正在加载动画...'
    }
  },
  methods: {
    onLoaded(status) {
      console.log('动画加载完成', status)
    },
    onComplete(animationName) {
      console.log('动画播放完成', animationName)
    },
    onLoop(animationName) {
      console.log('动画循环播放', animationName)
    },
    onError(error) {
      console.error('动画加载错误', error)
    }
  }
}
</script>

组件方法调用

// 在父组件中通过 ref 调用
<template>
  <c-spine ref="spineRef" :jsonUrl="jsonUrl" :atlasUrl="atlasUrl" />
  <button @click="playAnimation">播放</button>
  <button @click="pauseAnimation">暂停</button>
  <button @click="setAnimation">切换动画</button>
</template>

<script>
export default {
  methods: {
    playAnimation() {
      this.$refs.spineRef.play()
    },
    pauseAnimation() {
      this.$refs.spineRef.pause()
    },
    setAnimation() {
      this.$refs.spineRef.setAnimation('walk', true)
    }
  }
}
</script>

Props

Events

Methods

平台差异

H5/APP-PLUS

• 使用 spine-player 库渲染
• 支持丰富的控制面板
• 性能最佳

MP(小程序)

• 使用 PixiJS + Spine 运行时
• 支持 WebGL 渲染
• 兼容小程序环境

加载动画配置

自定义加载动画

组件支持自定义加载动画，可以通过以下方式进行配置：

1. 使用默认加载动画（推荐）

<c-spine 
  :showLoading="true"
  :showLoadingText="true"
  :loadingText="'正在加载...'"
/>

2. 自定义加载动画样式

组件内置了自定义加载动画样式，可以通过 CSS 修改：

.spine-loading {
  background: rgba(0, 0, 0, 0.8); /* 修改背景色 */
  color: #ffffff; /* 修改文字颜色 */
}

.loading-spinner {
  border-color: #007aff; /* 修改加载动画颜色 */
}

3. 参数说明

• showLoading: true/false - 是否显示加载动画
• showLoadingText: true/false - 是否显示加载文字
• loadingText: string - 自定义加载文字

加载动画配置

自定义加载动画

组件支持自定义加载动画，可以通过以下方式进行配置：

1. 使用默认加载动画（推荐）

<c-spine 
  :showLoading="true"
  :showLoadingText="true"
  :loadingText="'正在加载...'"
/>

2. 自定义加载动画样式

组件内置了自定义加载动画样式，可以通过 CSS 修改：

.spine-loading {
  background: rgba(0, 0, 0, 0.8); /* 修改背景色 */
  color: #ffffff; /* 修改文字颜色 */
}

.loading-spinner {
  border-color: #007aff; /* 修改加载动画颜色 */
}

3. 参数说明

• showLoading: true/false - 是否显示加载动画
• showLoadingText: true/false - 是否显示加载文字
• loadingText: string - 自定义加载文字

注意事项

1. 资源路径：请确保 Spine 资源文件(json/atlas)在正确的位置
2. 文件格式：请使用 Spine 导出的标准格式
3. 尺寸适配：组件会自动适配容器尺寸，建议使用 rpx 单位
4. 资源清理：组件会在销毁时自动清理资源，无需手动管理
5. 加载动画：支持自定义加载动画样式和文字
6. 加载动画：支持自定义加载动画样式和文字

示例

完整示例请参考 /pages/spine-example/spine-example.vue