我的 JS 动画重置了它的 marginTop，但不是它的 marginLeft

Posted 2023-03-06

【中文标题】我的 JS 动画重置了它的 marginTop，但不是它的 marginLeft

【英文标题】：My JS animation resets its marginTop, but not its marginLeft

【发布时间】：2022-01-10 03:39:09

【问题描述】：

我对 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";
            
        

【参考方案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";
            
        

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

【讨论】：

谢谢。我不熟悉 parseInt 并且在阅读后不完全理解它，但我现在让动画工作了。我的目标是制作一款超级简单的游戏，并从中学习更多。这里有什么好的话题吗？

parseInt 将只保留起始数字，例如 '13px' 仅变为 13。开始构建视频游戏并不是一件容易的事，首先您应该了解不同变量的范围以跟踪所有内容。另外，我建议先把你想做的事情写在纸上，然后开始把它翻译成代码。 （弹跳球很容易在纸上画出来，有助于理解数学）。