Davide 我遇到了另外一个问题，希望您有时间帮忙看看~
我使用的 viewport 设置展示所有的动画，动画包含：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>spine</title>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css"
/>
<style>
body {
margin: 0;
padding: 0;
background-color: bisque;
}
.grid {
position: relative;
left: 150px;
top: 400px;
display: flex;
flex-wrap: wrap;
width: 600px;
height: 60px;
}
.item {
width: 80px;
height: 60px;
box-sizing: border-box;
border: 1px solid green;
}
.container {
position: absolute;
left: -30px;
top: -10px;
width: 300px;
height: 200px
}
.btn {
position: absolute;
left: 200px;
top: 600px;
width: 100px;
height: 40px;;
}
</style>
</head>
<body>
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div id="container" class="container"></div>
</div>
<div>
<button type="button" class="btn" onclick="handleMove()">Move</button>
</div>
<script>
const coords = [
{
x: -30,
y: -10,
direction: 'right',
},
{
x: 50,
y: -10,
direction: 'front',
},
{
x: 130,
y: -10,
direction: 'right',
},
{
x: 210,
y: -10,
direction: 'right',
},
{
x: 290,
y: -10,
direction: 'right',
},
{
x: 370,
y: -10,
direction: 'right',
},
{
x: 370,
y: -70,
direction: 'front',
},
]
const player = new spine.SpinePlayer("container", {
skeleton: "./spine/yuyan/yuyan.json",
atlas: "./spine/yuyan/yuyan.atlas",
alpha: true,
backgroundColor: "#00000000",
showControls: false,
viewport: {
debugRender: true,
padTop: 0,
padLeft: 0,
padBottom: 0,
padRight: 0,
x: -300,
y: -200,
width: 600,
height: 400,
},
success: (player) => {
player.animationState?.setEmptyAnimation(0, 0)
player.animationState?.addListener({
complete: function (entry) {
if (entry.animation.name.includes('move')) {
remainingSteps--
curPos++
if (remainingSteps > 0) {
const animation = coords[curPos].direction + '_move'
handlePosAction(curPos, animation)
} else {
const animation = coords[curPos].direction + '_idle'
handlePosAction(curPos, animation)
}
}
},
});
},
});
let curPos = 0
let remainingSteps = 0
function setPosition(pos) {
container.style.left = pos.x + "px";
container.style.top = pos.y + "px";
}
function playAnimation(animation) {
if (player) {
player.animationState.clearTracks();
let loop = false
if (animation.includes('idle')) {
loop = true
} else {
loop = false
}
player.setAnimation(animation, loop)
player.play();
}
}
function handlePosAction(pos, animation) {
setTimeout(() => {
setPosition(coords[pos])
playAnimation(animation)
}, 0)
}
function handleMove() {
remainingSteps = 1
handlePosAction(curPos, 'right_move')
}
window.onload = () => {
const animation = coords[curPos].direction + '_idle'
handlePosAction(curPos, animation)
}
</script>
</body>
</html>
希望不会有太多的代码干扰问题。当我点击按钮时，container 根据坐标设置位置，以及根据坐标 play 相应的动画。从坐标 0 -> 1，正常 right_move，当 1->2时，front_idle 显示为：
角色不能显示，这是什么原因呢？
如果注释掉：player.animationState.clearTracks(); 更够显示出动画，但是动画会回到初始 pose。
