通过 Javascript 中的循环操作颜色答案

【问题标题】：Manipulate colors through a loop in Javascript通过 Javascript 中的循环操作颜色
【发布时间】：2020-07-19 18:41:46
【问题描述】：

我正在尝试创建一个 for 循环来操作 Javascript 中页面的背景，我想创建从 rgb(0;0;0) 到 rgb(255;0;0) 的淡入淡出效果

但是我非常卡在循环中，我没有找到将变量传递给 rgb() 函数的方法。

这是我的 Javascript 代码：

var r;

function change() {
  var doc = document.body;
  var color;

  for(r = 0; r < 256; r++){
    color = rgb(r; 0; 0);
    doc.style.backgroundColor = color;
  }
}

setInterval(change, 100);

【问题讨论】：

标签： javascript loops colors frontend

【解决方案1】：

试试这个

var r = 0;

function change() {
    color = 'rgb(' + r +', 0, 0)';
    document.body.style.backgroundColor = color;
    r < 256 ? r++ : 0;
}

setInterval(change, 100);

【讨论】：

可能需要清除r == 256时的区间，在控制台查看r的值

【解决方案2】：

设置颜色，你可以使用模板文字，因为 backgroundColor 属性需要是一个字符串

color = `rgb(${r}, 0, 0)`;
doc.style.backgroundColor = color;

【讨论】：

【解决方案3】：

要创建平滑的 60fps 过渡，最好使用requestAnimationFrame 而不是setInterval。

通过调用setInterval(change, 100)，背景颜色将每100ms更新一次。大多数设备每秒刷新屏幕 60 次。因此，为了获得平滑的过渡，您需要每 16.67 毫秒 (1 秒/60) 更新一次背景颜色。但是，将 16.67 传递给 setInterval 并不是一种可靠的方法。这就是requestAnimationFrame 的用武之地。当您将一些代码放入requestAnimationFrame 回调中时，浏览器会确保在下一次重绘之前执行该代码。

这些是一些很好的资源，可以帮助您了解更多信息：

Window.requestAnimationFrame()

Rendering Performance

Optimize JavaScript Execution

Jake Archibald: In The Loop - JSConf.Asia

这个递归的change 函数接受一个回调和red 的值，并使用requestAnimationFrame 调用自身，直到red 的值达到255。如果你传递了一个回调，它会在转换后被触发。

function change(callback, r) {
  r = r === undefined ? 0 : r;
  if (r >= 0 && r < 256) {
    const color = `rgb(${r}, 0, 0)`;
    requestAnimationFrame(() => {
      document.body.style.backgroundColor = color;
      change(callback, r + 1);
    });
  } else {
    callback && callback();
  }
}

change(() => {
  alert('Transition complete');
});

另外，如果您使用的是setInterval，请不要忘记在转换完成后使用clearInterval 清除它。

WindowOrWorkerGlobalScope.setInterval()

WindowOrWorkerGlobalScope.clearInterval()

【讨论】：

【解决方案4】：

这个fade 函数使用async 循环将背景颜色的red 分量从0 逐渐更改为255：

const fade = async () => {
  const getRed = () => +window.getComputedStyle(document.body, null)
    .backgroundColor
    .match(/\d+/)[0];
  while (getRed() < 255) {
    document.body.style.backgroundColor = `rgb(${getRed() + 1}, 0, 0)`;
    await new Promise(resolve => setTimeout(resolve, 100));
  }
}
fade();

body {
  background-color: rgb(0, 0, 0);
}

【讨论】：