一、说明
(1)这边使用的spine版本是3.8.99
spine包含3个部分,可以将三个文件上传到cdn,三个文件放在相同的目录中
test.atlas 、 test.json 、test.png
(2)pixi.js - v7.0.4
https://github.com/pixijs/pixijs
(2)pixi-spine - v4.0.4
https://github.com/pixijs-userland/spine
如果找不到pixi-spine文件可以在工程中安装 npm i pixi-spine然后在node_modules里面找到对应的@pixi-spine包找到js文件
一、在html中引入
<script src="/assets/js/pixi.min.js"></script>
<script src="/assets/js/pixi-spine.js"></script>
二、在组件中使用
<template>
<div class="canvas-box">
<canvas ref="canvasRef"></canvas>
</div>
</template>
<script lang="ts" setup>
const canvasRef = ref();
const props = defineProps({
json: {
type: String,
default: () => "",
},
});
const showAnimate = (json: string) => {
window.PIXI.Assets.load(json).then((resources: any) => {
// 从骨骼数据中读取宽高
const { width, height, animations } = resources.spineData;
// 绑定canvas画布,设置宽高
const app = new window.PIXI.Application({
view: canvasRef.value, // 设置canvas节点 `#canvas`
backgroundAlpha: 0, // 背景透明
width: width,
height: height,
});
// 创建spine动画对象并添加到画布中
let animation = new window.PIXI.spine.Spine(resources.spineData);
app.stage.addChild(animation);
// 设置动画位置为画布中心
animation.x = width / 2;
animation.y = height / 2;
// 循环播放动画
animation.state.setAnimation(0, animations[0].name, true);
});
};
showAnimate(props.json);
</script>
<style lang="scss" scoped>
</style>