如何根据特定的js值平稳有效地调整html元素的颜色？

Question

我进行了一些模拟，其中草根据其能级而变为不同的颜色。 当前，每个草帽都通过if / else语句来确定每个游戏循环的颜色。 进行足够的if语句使颜色平滑变化似乎非常耗费CPU，而且我想知道是否有更有效的方法可以做到这一点。

模拟可以在这里找到： http : //j.mp/Wou7Sl （有关为草着色的部分是一个名为colorGrass的函数，始于第134行）

这不是一个紧急的问题，但答案是值得的。

Answer 1

首先，您可以做一些事情来显着提高性能。

• 您对$(document).ready有很多不必要的调用； 这些只会减慢速度。

• jQuery选择器与getElementById相比非常慢； 而是在性能很重要的地方使用它，并尝试尽可能少地查找元素。 获取元素的句柄并重用它。

• .style比jQuery的.css快得多，在性能很重要时使用它。

• 避免重复引用foo[bar] ； 相反，请执行baz = foo[bar] ，然后使用baz 。

这是一个具有上述某些更改的演示 ； 您会注意到它运行更平稳，消耗的CPU更少，并且可以更高的帧速率运行。 还有更多的优化方法，但是您可以理解。

现在我们已经清理干净了，我们可以解决草了。 您的草代码最初看起来像这样：

function colorGrass(i) {
    $(document).ready(function () {
        if (Grasses[i].energy < 25) {
            $('#' + Grasses[i].id + '').css('background-color', '#666600');
        }
        if (Grasses[i].energy > 25 && Grasses[i].energy < 50) {
            $('#' + Grasses[i].id + '').css('background-color', '#669900');
        }
        if (Grasses[i].energy > 50 && Grasses[i].energy < 75) {
            $('#' + Grasses[i].id + '').css('background-color', '#66cc00');
        }
        if (Grasses[i].energy > 75) {
            $('#' + Grasses[i].id + '').css('background-color', 'green');
        }
    });
}

进行上述更改后，看起来像这样（更干净，您不觉得吗？）：

function colorGrass(i) {
    var grass = Grasses[i];
    var el = document.getElementById(grass.id);
    if (grass.energy < 25) {
        el.style.backgroundColor = '#666600';
    }
    else if (grass.energy < 50) {
        el.style.backgroundColor = '#669900';
    }
    else if (grass.energy < 75) {
        el.style.backgroundColor = '#66cc00';
    }
    else {
        el.style.backgroundColor = 'green';
    }
}

现在，要使草顺利地放牧，您应该能够获取“能量”值并将其直接转换为“绿色”通道，例如：

function colorGrass(i) {
    var grass = Grasses[i];
    var el = document.getElementById(grass.id);
    el.style.backgroundColor = 'rgb(100,' + (grass.energy + 100) + ',0)';
}

它的外观应由您决定，因此请根据自己的喜好调整这些值，并进行其他必要的更改（css等）以使其看起来不错。