javascript - 减慢while循环以在Javascript中为图像序列设置动画

Question

我正在使用html css javascript开发一个简单的游戏，当我按下一个键时使用while循环为一系列图像设置动画时出现问题，它只显示我知道的最后一个while循环适用于处理器速度但我需要在不使用 css 动画“@keyframes”的情况下缓慢地为图像制作动画。谢谢

var n=0;

function rotRight()
{
    var str1 = "url(sprt/trk";
    var str2 = ".png)";
    var ss=str1.concat(n);
    
    trk.style.backgroundImage=ss.concat(str2);

    while(n!=4)
    {
        if(n>4)
        {
            n--;    
        }
        else
        {
            n++;
        }
    }  
}

标签： javascripthtmlcss

Answer 1

要在浏览器中制作基于 JavaScript 的动画，您根本不需要使用循环。相反，您更新项目，让浏览器显示它，然后在延迟后再次更新它，使用setTimeoutand/or requestAnimationFrame。所以你可能会这样做：

let n = 0;

rotRight();

function rotRight()
{
    // Do an update
    trk.style.backgroundImage = `url(sprt/trk${n}.png)`;

    // Schedule the next if appropraite
    if (n !== 4) {
        if (n > 4) {
            n--;    
        } else {
            n++;
        }
        setTimeout(rotRight, 1000); // 1000ms = one second
    }
}

（我还更新了要使用的代码let，const而不是var -var在现代 JavaScript 中没有位置 - 并使用模板文字来构建 URL。）

但是，对于许多动画来说，每次更新都根据时间而不是迭代计算它应该在整体动画中的位置可能很重要，因为各种事情可能会阻止您的代码及时运行。在这些情况下，您会记得您开始的时间，然后当您被叫到时，您会确定您应该在哪里并相应地进行更新。您的后台交换器可能不需要，但更高级的需要。