我的JS动画重置了其marginTop，但没有重置其marginLeft

Question

我是javascript动画的超级新手。我刚刚学会了如何将第二个动作添加到我的动画中。当运行funk()功能时，球会向下移动到右侧。当它触发funktre()功能时，球进入其起始marginTop位置，但保持其marginLeft位置。为什么它会回到顶端？我希望第二个动画funktre()将球从funk()的结束位置移动。

const ball = document.querySelector("#en");
ball.addEventListener("click", funk);
function funk() {
let id = null;
let position = 0;
clearInterval(id);
id = setInterval(funkto, 5);
function funkto() {
if (position == 450) {
clearInterval(id);
funktre();
// sett en ny funksjon her
}
else {
stop();
position++;
ball.style.marginLeft = position + "px";
ball.style.marginTop = position + "px";
}
}
};
function stop() {
ball.removeEventListener("click", funk);
};

function funktre() {
let idd = null;
let pos = 0;
clearInterval(idd);
idd = setInterval(funkfire, 5);
function funkfire() {
if (pos == 200) {
clearInterval(idd);
// ny funksjon her
}
else {
pos++;
ball.style.marginTop = pos + "px";
}
}
}

Answer 1

"我想要第二个动画，funktre，把球从funk((的结束位置移开">

然后，您不应将其起始位置初始化为零，而应将其初始化为当前位置

function funktre() {
let idd = null;
let pos = parseInt(ball.style.marginTop); // set the initial pos to current pos
clearInterval(idd);
idd = setInterval(funkfire, 5);
function funkfire() {
if (pos == 200) {
clearInterval(idd);
// ny funksjon her
}
else {
pos++;
ball.style.marginTop = pos + "px";
}
}
}

如果你打算编程更多的动画，甚至是视频游戏，我建议将球的顶部/左侧位置存储在全局变量中(你可以从任何范围访问(。