javascript - 计算 RGB 颜色之间的褪色值的有效方法？

Question

我正在使用 Node 包装器修改我的键盘照明。包含的淡入淡出函数使用一个巨大的数组，其值从 [0,0,0] 到 [255,255,255]，然后找到起点和终点并迭代该数组。这意味着当从蓝色 [0,0,255] 淡入黑色 [0,0,0] 时，它实际上会穿过其他颜色，而不是仅仅对蓝色值进行倒计时从255到0。因此，颜色之间的所有褪色都是一团糟，看起来很糟糕。

所以我创建了自己的淡入淡出功能，如下所示:

function ledSet(led, r, g, b, timeout) {
    setTimeout(function() { cue.set(led, r, g, b); }, timeout);
}

function difference(array1, array2) {
    var max = 0;

    for(var i in array1) {
        for(var j in array2) {
            var value = Math.abs(array1[i]-array2[j]);
            if(value > max) {
                max = value;
            }
        }
    }
    return max;
}

function fadeLed(key, from, to, duration) {

    var steps = difference(from, to);
    var interval = duration/steps;

    for(var i = 1; i <= steps; i++) {
        var rgb = [];

        for(var j in from) {

            var change = Math.abs(from[j]-to[j])/steps*i;
            var value = Math.ceil((from[j] > to[j]) ? from[j]-change : from[j]+change);

            rgb.push(value);
        }
        ledSet(key, rgb[0], rgb[1], rgb[2], interval*i);
    }

}

fadeLed('Enter', [0,0,255], [0,0,0], 500);

它在单个或几个 LED 上工作得很好，但对于多个 LED 来说速度非常慢(比如改变整个键盘的颜色)。我将尝试使用一个选项来通过一个命令设置多个 LED(如果多个 LED 共享相同的开始和结束颜色)进行优化，但我想知道是否有一种数学上更有效的方法来计算两个之间的淡入淡出所需的值RGB 颜色。

谢谢!

Answer 1

您以这种方式安排了很多超时。

您可以做的另一种选择是仅安排一个超时函数并从该函数内安排另一个超时函数。

举一个简单的例子 - 而不是这样的:

function f(i) {
  setTimeout(() => console.log(i), i * 100);
}

for (let i = 0; i < 10; i++) {
  f(i);
}

你可以这样做:

function f(i, m) {
  if (i < m) {
    console.log(i);
    setTimeout(() => f(i + 1, m), 100);
  }
}

f(0, 10);

您可以做的其他一些事情:

• 开始之前预先计算值
• 优化步骤，不要做得太多
• 有一个函数以固定的时间间隔运行多个其他函数
• 使用 requestAnimationFrame 的填充来实现一些一致的间隔