如何使用javascript/jQuery增加/减少十六进制颜色值

Question

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

我想做的是这样的事情:

适应类似的for-loop

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(简化):

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#C8E3EF"/>
        <stop offset="100%"  stop-color="#C8E3EF"/>
    </linearGradient>
    ...
</svg>

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

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#dfcf99"/>
        <stop offset="100%"  stop-color="#c5b6ec"/>
    </linearGradient>
    ...
</svg>

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

Answer 1

我前段时间写了一个渐变函数,也许它可以帮助你(返回一个数组):

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;

         }

Answer 2

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

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/