安装spine官方依赖

1
pnpm add @esotericsoftware/spine-player

播放函数(需将动画文件传到CDN或保存到项目文件夹)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const playerContainerRef: any = useRef<HTMLDivElement>(null);

const loadFiles = () => {
    const skeletonJsonUrl = `https://xxx/atlas/box-gem/box.json`
    const atlasUrl = `https://xxx/atlas/box-gem/box.atlas`
    const player: any = new SpinePlayer(playerContainerRef.current, {
        jsonUrl: skeletonJsonUrl,
        atlasUrl: atlasUrl,
        animation: 'idle',
        alpha: true,
        showLoading: false
    } as any);
    playerContainerRef.current.style.pointerEvents = 'none';
};

useEffect(() => {
    loadFiles()
}, []);