程序化梯度使用Javascript停止

Question

使用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).例如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;