使用Javascript停止编程渐变

使用Javascript（jQuery），给定2个颜色值（例如2033ff和3300a0 ），如何确定它们之间的某些渐变停止？

原因是，我打算使用颜色值数组：

  0 => '000000' 8400 => 'f0ff00' 44000 => '2033ff' 68400 => '3300a0' 

一天有86400秒，上午12:00映射到0，晚上11:59映射到86399.随着时间的推移，指定元素的背景颜色通过window.setInterval(function(e){ ... }, 1000)变为渐变列表中的相应颜色window.setInterval(function(e){ ... }, 1000) 。 例如， 2:32:11PM = 52331 ，其中示例的范围介于2033ff和3300a0之间。

我不需要使用值填充数组（除非这更容易），而是使用索引和值作为引用。

Answer 1

只需进行线性插值：

鉴于2033ff和3300a0作为开始和结束你将做：

 red1 = 0x2033ff >> 16; green1 = (0x2033ff >> 8) & 0xFF; blue1 = 0x2033ff & 0xFF; red2 = 0x3300a0 >> 16; green2 = (0x3300a0 >> 8) & 0xFF; blue2 = 0x3300a0 & 0xFF; time = 0.3 // This should be between 0 and 1 outred = time * red1 + (1-time) * red2; outgreen = time * green1 + (1-time) * green2; outblue = time * blue1 + (1-time) * blue2; 

Answer 2

我将库RainbowVis-JS编写为将数字映射到颜色的通用解决方案。 对于您的示例，您将使用：

 var rainbow = new Rainbow(); rainbow.setSpectrum('2033ff', '3300a0'); rainbow.setNumberRange(1, 86400); var colour = rainbow.colourAt(52331); // 2c14c5