减少hex颜色值

是否可以在jQuery / javascript中逐步增加或减少hex颜色值？

我想做的是这样的事情：

适应类似的for循环

for (var i = 0; i <= 100; i++) { console.log(i); }

我想做点什么

 for (var color = 000000; color <= ffffff; color++) { console.log(color); }

没有任何转换。

那可能吗？我已经尝试过了：

 for (var color = parseInt('000000', 16); color <= parseInt('ffffff', 16); color++){ console.log(color.toString(16)); }

它工作但它非常慢（我收到警告，脚本正在减慢网站速度，如果我想停止脚本）。

我想这样做的原因是：我想在一定的时间间隔内更改svg渐变的颜色停止。如果我有这样的svg（简化）：

  ...     ...

该梯度当然会显示为纯色。现在我想逐步改变它，例如

  ...     ...

在每个步骤或间隔，我想要更接近目标颜色的一个值（通过加/减）。最后，结果应该是平滑的颜色动画。没有转换可能吗？它不一定是for-loop btw。我只是选择它来说明我的想法。

我前段时间写了一个渐变函数，也许它可以帮助你（返回一个数组）：

 function gradient(startColor, endColor, steps) { var start = { 'Hex' : startColor, 'R' : parseInt(startColor.slice(1,3), 16), 'G' : parseInt(startColor.slice(3,5), 16), 'B' : parseInt(startColor.slice(5,7), 16) } var end = { 'Hex' : endColor, 'R' : parseInt(endColor.slice(1,3), 16), 'G' : parseInt(endColor.slice(3,5), 16), 'B' : parseInt(endColor.slice(5,7), 16) } diffR = end['R'] - start['R']; diffG = end['G'] - start['G']; diffB = end['B'] - start['B']; stepsHex = new Array(); stepsR = new Array(); stepsG = new Array(); stepsB = new Array(); for(var i = 0; i <= steps; i++) { stepsR[i] = start['R'] + ((diffR / steps) * i); stepsG[i] = start['G'] + ((diffG / steps) * i); stepsB[i] = start['B'] + ((diffB / steps) * i); stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16); } return stepsHex; }

那么你可以通过这种方式做到这一点：

 var incrementColor = function(color, step){ var colorToInt = parseInt(color.substr(1), 16), // Convert HEX color to integer nstep = parseInt(step); // Convert step to integer if(!isNaN(colorToInt) && !isNaN(nstep)){ // Make sure that color has been converted to integer colorToInt += nstep; // Increment integer with step var ncolor = colorToInt.toString(16); // Convert back integer to HEX ncolor = '#' + (new Array(7-ncolor.length).join(0)) + ncolor; // Left pad "0" to make HEX look like a color if(/^#[0-9a-f]{6}$/i.test(ncolor)){ // Make sure that HEX is a valid color return ncolor; } } return color; };

对于步骤：

1乘以1到256增加最后一种颜色
256乘256增量中间色
65536乘65536增加第一种颜色

这里有一个运行的例子： http ： //jsfiddle.net/a3JbB/

使用setInterval删除exception（堆栈溢出）。的jsfiddle

  var start = 0x000000, end = 0xFFFFFF, temp; var intervalId = setInterval(function(){ if(start== end){clearInterval(intervalId )}; temp = (start).toString(16); if(temp.length < 8){ temp = "0000000".substring(0, 8-temp.length)+temp; } start++; console.log(temp ); }, 10);