我的 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";
            }
        }
}

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