javascript - JS : from RGB Blue to RGB Red

Question

我试图在 上将 RGB 颜色从蓝色 (rgba(0,0,255)) 转换为红色 (rgba(255,0,0)) >JS mouseenter，渐进式。

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

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/else 语句来检查每个案例，但我只是想知道是否有更有效的数学方法？

我不会尝试做任何动画/过渡。

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%的过程中先增加后减少。