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来制作一些一致的间隔

有效计算RGB颜色之间的淡入淡出值的方法？

1 个答案: