JS :从RGB蓝色到RGB红色

Question

我正在尝试将progressively.上的RGB颜色从蓝色(rgba(0,0,255))转换为红色(rgba(255,0,0))

因此，每次鼠标输入一个元素时，它都会“增加”它的背景色，从蓝色到绿色，再到红色。

带有WIP现场演示的：http://codepen.io/enguerranws/pen/ZQOBwe

以下是我迄今所做的工作：

function onGridDone(){
  var gridders = document.querySelectorAll('.gridder');
  for(var i = 0; i < gridders.length; i++){
    gridders[i].addEventListener('mouseenter', onHover );
  }  
}
function onHover () {
  var currentColor = this.style.backgroundColor,
      currentColorArr = currentColor.replace(/[^\d,]/g, '').split(',');
      R = currentColorArr[0],
      G = currentColorArr[1],
      B = currentColorArr[2];
  console.log(R,G,B);
  if(B > 0) B = B-10;
  var indic = 255-B;
  G = indic/2;
  R = indic;

  this.style.backgroundColor = "rgb("+R+","+G+","+B+")";
}

我尝试过多种方法，但基本上，我希望我的颜色从rgba(0,0,255)到rgba(0,255,130)，然后是rgba(255,130,0)，最后是rgba(255,0,0) (所以，从蓝色到绿色，再到绿色，再到红色)。

我知道我可以做多个if / each语句来检查每一种情况，但我只是在徘徊，如果有更有效的方法使用数学？

我不想做任何动画/转换。

Answer 1

为了使用一个数学公式，有一些进步的数字指示器，例如，从0到255，然后根据它计算颜色是有帮助的。

这并不是您“基本上”要求的，但它说明了我的意思:假设红色组件在这个过程中将线性地从0增加到255。然后，您可以查看现有字段的红色值，并立即知道您所在的位置。如果您想要通过绿色，这应该接近您想要做的：

// assume r,g,b are the current values
var progress = r;
progress += 1; // of course you can increment faster
r = progress;
g = 255 - (255 * (Math.abs(progress-127)/128))
b = 255 - progress;

这样你就不会像在你的问题中那样传递颜色rgba(255,130,0)。不过，我认为这可能还能解决你的问题。r线性增加，b线性下降，g先升高后下降，50%后下降。