135 lines
3.2 KiB
TypeScript
135 lines
3.2 KiB
TypeScript
// 重构代码
|
|
|
|
import { Application, Assets } from 'pixi.js'
|
|
import 'pixi.js/unsafe-eval'
|
|
import '@pixi/spine-pixi'
|
|
import { Spine, TrackEntry } from '@pixi/spine-pixi'
|
|
import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import useRouterStore from '@/useRouterStore'
|
|
import useSearchStore from '@/layout/header/search/useSearchStore'
|
|
import useLayoutStore from '@/layout/useLayoutStore'
|
|
|
|
const stageStrList = [
|
|
'dazhaohu',
|
|
'xunhuan',
|
|
'yemianbuhuoyue',
|
|
'dahulu',
|
|
'shuixing',
|
|
'duxin',
|
|
'aixin',
|
|
'dianji',
|
|
'xiaoxitixing'
|
|
]
|
|
|
|
const load = async (stageStr: string) => {
|
|
await Assets.load({ alias: stageStr, src: `/fox/xiaohuli_${stageStr}.json` })
|
|
await Assets.load({
|
|
alias: stageStr + '_atlas',
|
|
src: `/fox/xiaohuli_${stageStr}.atlas`
|
|
})
|
|
}
|
|
|
|
export default defineComponent(() => {
|
|
let container: HTMLCanvasElement | null = null
|
|
const app = new Application()
|
|
let spine: Spine | null = null
|
|
let track: TrackEntry | null = null
|
|
const sleep = ref(false)
|
|
const run = (stageStr: string) => {
|
|
if (spine) {
|
|
app.stage.removeChild(spine)
|
|
spine.destroy()
|
|
}
|
|
spine = Spine.from({ skeleton: stageStr, atlas: stageStr + '_atlas' })
|
|
track = spine.state.setAnimation(0, stageStr, stageStr === 'xunhuan' || stageStr === 'dahulu')
|
|
spine.x = 80
|
|
spine.y = 200
|
|
spine.scale = 0.2
|
|
app.stage.addChild(spine)
|
|
const handle = () => {
|
|
if (track?.isComplete()) {
|
|
app.ticker.remove(handle)
|
|
if (stageStr !== 'xunhuan' && stageStr !== 'dahulu') {
|
|
run(sleep.value ? 'dahulu' : 'xunhuan')
|
|
}
|
|
}
|
|
}
|
|
app.ticker.add(handle)
|
|
}
|
|
watch(sleep, (val) => {
|
|
if (val) {
|
|
run('yemianbuhuoyue')
|
|
} else {
|
|
run('shuixing')
|
|
}
|
|
})
|
|
const handle = () => {
|
|
if (document.visibilityState === 'visible') {
|
|
sleep.value = false
|
|
run('shuixing')
|
|
}
|
|
}
|
|
let it: any = 0
|
|
const handleMove = () => {
|
|
clearTimeout(it)
|
|
sleep.value = false
|
|
it = setTimeout(() => {
|
|
sleep.value = true
|
|
}, 10000)
|
|
}
|
|
onMounted(async () => {
|
|
if (!container) return
|
|
await app.init({
|
|
width: 250,
|
|
height: 195,
|
|
backgroundAlpha: 0,
|
|
resolution: window.devicePixelRatio || 1,
|
|
autoDensity: true,
|
|
antialias: true,
|
|
background: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
canvas: container
|
|
})
|
|
for (const str of stageStrList) {
|
|
await load(str)
|
|
}
|
|
watch(
|
|
() => layout.currentMode,
|
|
() => {
|
|
run('dazhaohu')
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
window.addEventListener('visibilitychange', handle)
|
|
window.addEventListener('mousemove', handleMove)
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('visibilitychange', handle)
|
|
window.removeEventListener('mousemove', handleMove)
|
|
})
|
|
|
|
const router = useRouterStore()
|
|
const search = useSearchStore()
|
|
const layout = useLayoutStore()
|
|
|
|
watch(
|
|
() => [router.path, search.focus],
|
|
([a, b]) => {
|
|
if (a || b) {
|
|
run('duxin')
|
|
}
|
|
}
|
|
)
|
|
return () => (
|
|
<canvas
|
|
ref={(el) => (container = el as any)}
|
|
onMouseenter={() => {
|
|
run('dianji')
|
|
}}
|
|
onClick={() => {
|
|
run('aixin')
|
|
}}
|
|
/>
|
|
)
|
|
})
|