//让我解释一下代码的作用,有两个盒子,一蓝一绿,当你点击绿色盒子时,蓝色盒子会在空中移动一圈,圆圈上有12个点,每个点都是一个案例,当蓝色框在移动时,蓝色框和绿色框都在旋转。这段代码工作正常,问题是在最后一次旋转时,当蓝色框返回到起点时,蓝色框有一个神秘的快速 360 旋转,这不在我的代码中,而且绿色框也有360度旋转,没有任何解释。我查看了 StackOverFlow、In the Documentation 和 Discord,但我不知道如何称呼这个问题,而且您知道,当您不知道要搜索的内容的名称时,很难进行搜索。关于是什么原因导致点击重置点出现这种神秘的 360 度旋转,有什么帮助吗?我不希望它有一个神秘的 360 度旋转,以某种方式将该点标记为特殊,而不是与所有其他点相同。
init: function () {
var rota = document.querySelector(".rota");
var caller = document.querySelector("#caller");
var clickCount = 0;
let shouldScaleUp = true; // Keep track of scaling direction
caller.addEventListener("click", function (e) {
var rotation = caller.getAttribute("rotation");
var position = caller.getAttribute("position");
var scale = caller.getAttribute("scale");
// Blue box rotation, position, and scale
var angle = (clickCount * Math.PI) / 6 - Math.PI / 2; // Angle for each click (360 degrees / 12 clicks), offset by -90 degrees
var newX, newY, newZ;
switch (clickCount) {
case 0:
newX = 3;
newY = 2;
newZ = -3;
break;
case 1:
newX = 2;
newY = 2;
newZ = -2;
break;
// case 2 through 10 you can just imagine
case 11:
newX = 2;
newY = 2;
newZ = -4;
break;
case 12:
newX = 3;
newY = 2;
newZ = -3;
break;
}
rota.setAttribute("animation", {
property: "rotation",
to: { x: (-angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the green box
dur: 1000,
shortestPath: true
});
rota.setAttribute("animation__2", {
property: "position",
to: { x: newX, y: newY, z: newZ }, // Move along the circular path above the green box
dur: 500,
});
rota.setAttribute("animation__3", {
property: "scale",
from: { x: 0.01, y: 0.01, z: 0.01 }, // Start with a very small scale
to: { x: 1, y: 1, z: 1 }, // Expand to full size
dur: 1000,
});
// Green box rotation and scale
caller.setAttribute("animation", {
property: "rotation",
to: { x: (angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the blue box
dur: 1000,
});
clickCount = (clickCount + 1) % 12; // Reset```
看起来这个问题可能与您在 switch 语句中处理最终情况(情况 12)的方式有关。当 clickCount 达到 12 时,应重置为 0 以重新启动动画序列。但是,您似乎将其重置为 (clickCount + 1) % 12,这实际上将其重置为 1 而不是 0。
要解决此问题,您应该在 clickCount 达到 12 时将其重置为 0。以下是更正后的行: 点击次数 = (点击次数 + 1) % 13; // 当达到 12 时重置为 0
通过将 % 12 更改为 % 13,它可以确保 clickCount 从 0 循环到 12,然后重置为 0,这应该可以解决最后神秘的额外旋转问题。
此外,请确保调整案例 12 的案例处理,以正确处理最终轮换。
如果您需要进一步帮助或遇到任何其他问题,请告诉我!