Sorry about my lacking of details, below is my additional informations:
vue
<script setup lang="ts">
import * as spine from "@esotericsoftware/spine-player";
import "@esotericsoftware/spine-player/dist/spine-player.css";
import { onMounted } from "vue";
onMounted(() => {
console.log("Hello World");
initSpine();
});
function initSpine() {
// @ts-ignore
new spine.SpinePlayer("player-container", {
jsonUrl: "mySpine/skeleton.json",
atlasUrl: "mySpine/skeleton.atlas",
showControls: true,
backgroundColor: "#00000000",
alpha: true,
success: function (player: any) {
console.log(player);
player.animationState.addListener({
event: function (t: any) {
// switch (t.animation.name) {
// case "surf":
// player.animationState.setAnimation(0, "jump", true);
// break;
// case "jump":
// player.animationState.setAnimation(0, "Skateboard", true);
// break;
// case "jump2":
// player.animationState.setAnimation(0, "surf", true);
// break;
// case "Skateboard":
// player.animationState.setAnimation(0, "jump2", true);
// break;
// }
}
});
player.animationState.setAnimation(0, "animation", true);
}
});
}
</script>
<template>
<div id="player-container"></div>
</template>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spine Testing</title>
</head>
<body>
<div id="player-container"></div>
<script src="http://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
<link
rel="stylesheet"
href="http://esotericsoftware.com/files/spine-player/4.0/spine-player.css"
/>
<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "skeleton.json",
atlasUrl: "skeleton.atlas",
showControls: true,
backgroundColor: "#00000000",
alpha: true,
// Added:
success: function (player) {
// console.log(player);
// player.animationState.addListener({
// event: function (t: any) {
// switch (t.animation.name) {
// case "surf":
// player.animationState.setAnimation(0, "jump", true);
// onToOff();
// break;
// case "jump":
// player.animationState.setAnimation(0, "Skateboard", true);
// break;
// case "jump2":
// player.animationState.setAnimation(0, "surf", true);
// break;
// case "Skateboard":
// player.animationState.setAnimation(0, "jump2", true);
// break;
// }
// }
// });
// player.animationState.setAnimation(0, "animation", true);
},
});
</script>
</body>
</html>
And allow me to list my questions:
Why only deforming doesn't work on the vue? or more specifically, how to use npm spine-ts correctly?
As above, I used eventListener to trigger some functions, but when I change the page(not only vue, but all the SPA frameworks), spine-player was still working, and triggered lots of errors; it means that spine-player keep playing, So how do I dispose the spine player before my leaving?
Thanks again!