计算RGB颜色之间渐变值的有效方法？

Question

我正在使用节点包装器修改我的键盘照明。包含的淡入淡出函数使用一个巨大的数组，其值从[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 的 polyfill 来制作一些一致的间隔