更新记录

v0.0.1（2026-08-30）

首次上传

平台兼容性

uni-app(3.8.3)

Effect Box 盲盒特效组件

一个基于 uni-app 的盲盒抽奖特效组件，SVGA 全屏动画与音效文件实现，仅支持 H5

功能特性

• 全屏 SVGA 动画播放
• 按钮点击音效
• 动画完成音效

基本使用

<script setup lang="ts">
import { ref } from 'vue'
import EffectBox from '@/components/effect-box/effect-box.vue'

const showEffect = ref(false)

function handleDraw() {
  showEffect.value = true
}
</script>

<template>
  <button @click="handleDraw">
    点击抽奖
  </button>
  <EffectBox v-model:show="showEffect" />
</template>

完整示例（含预加载）

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import EffectBox from '@/components/effect-box/effect-box.vue'

const showEffect = ref(false)
const effectBoxRef = ref()

onMounted(() => {
  // 预加载 SVGA 资源
  effectBoxRef.value?.preload()
})

function handleDraw() {
  // 播放按钮点击音效
  effectBoxRef.value?.playClickSound()
  setTimeout(() => {
    showEffect.value = true
  }, 300)
}
</script>

<template>
  <button @click="handleDraw">
    点击抽奖
  </button>
  <EffectBox ref="effectBoxRef" v-model:show="showEffect" />
</template>

Props 属性

Events 事件

使用示例

<script setup lang="ts">
import { ref } from 'vue'
import EffectBox from '@/components/effect-box/effect-box.vue'

const showEffect = ref(false)
const showResult = ref(false)

function handleDraw() {
  showEffect.value = true
}

function onEffectComplete() {
  // 动画播放完成，显示结果弹窗
  showResult.value = true
}
</script>

<template>
  <button @click="handleDraw">
    点击抽奖
  </button>
  <EffectBox v-model:show="showEffect" @complete="onEffectComplete" />
</template>

Method 实例方法

静态资源

src/static/effect-box/
├── songli.svga           # 盲盒抽奖 SVGA 动画
├── magic-poof-pop.mp3    # 动画完成音效
└── cartoon-music.mp3     # 按钮点击音效

工作流程

组件挂载
  │
  ├─→ preload() 预加载 SVGA
  │
  └─→ 初始化音效

触发抽奖
  │
  ├─→ playClickSound() 播放按钮点击音效
  │
  ├─→ show = true
  │     │
  │     ├─→ 播放 SVGA 动画
  │     │
  │     ├─→ 动画开始 → 触发 start 事件
  │     │
  │     ├─→ 动画就绪 → 延迟 800ms 播放 SVGA 音效
  │     │
  │     └─→ 动画完成 → 触发 complete 事件
  │                       │
  │                       └─→ 触发 update:show(false) → 关闭弹窗