加权平均混色

Question

（抱歉，不知道标题的措词）。

我想制作一个进度条类型的东西，当它在屏幕上移动时，从绿色 - 橙色 - 红色变为橙色。例如：

我如何才能找到的颜色应该是在给定的点是什么？

在此先感谢！

Answer 1

编辑：下面是实现这个的jsfiddle链接：http://jsfiddle.net/EAM9a/

对于最简单的方法，你可以做的颜色之间的线性插值。我们假设进度从0.0到1.0，以使事情变得简单。所以

0.0 - green - rgb(0, 100, 0) 
0.5 - orange - rgb(255, 165, 0) 
1.0 - red - rgb(139, 0, 0) 

然后，我们可以插入之间的绿色和橙色或之间的橙色和红色，取决于我们想要的颜色。

var green = [0, 100, 0], 
    orange = [255, 165, 0], 
     red = [139, 0, 0]; 

function color(val) { 
    if (val < 0.5) { 
    return colorToString(interpolate(val * 2, green, orange)); 
    } else { 
    return colorToString(interpolate((val-0.5) * 2, orange, red)); 
    } 
} 

// val should be in the range [0.0, 1.0] 
// rgb1 and rgb2 should be an array of 3 values each in the range [0, 255] 
function interpolate(val, rgb1, rgb2) { 
    var rgb = [0,0,0]; 
    var i; 
    for (i = 0; i < 3; i++) { 
    rgb[i] = rgb1[i] * (1.0 - val) + rgb2[i] * val; 
    } 
    return rgb; 
} 

// quick helper function to convert the array into something we can use for css 
function colorToString(rgb) { 
    return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")"; 
} 

Answer 2

我创建了自己的彩色取景器为您提供：

它接受的开始和结束色调，位置的数量，和当前位置，并返回一个CSS颜色值。

See it working in a fiddle！

function restrict(value, low, high) { 
    return value < low ? low : (value > high ? high : value); 
} 
function interpolate(rangeLow, rangeHigh, inputLow, inputHigh, value) { 
    return (value - inputLow)/(inputHigh - inputLow) * (rangeHigh - rangeLow) + rangeLow; 
} 
function pad2(value) { 
    return ('0' + value).substr(-2, 2); 
} 
function webColorFromRGB(color) { 
    return '#' + pad2(color.R.toString(16)) + pad2(color.G.toString(16)) + pad2(color.B.toString(16)); 
} 
function floatModulo(value, modulo) { 
    return value - Math.floor(value/modulo) * modulo; 
} 
function webColorFromPosition(fromHue, toHue, positions, position) { 
    var hue = interpolate(fromHue, toHue, 0, positions, position), 
     RGB = {R: 0, G: 240, B: 120}; 
    for (var c in RGB) { 
     if (!RGB.hasOwnProperty(c)) { continue; } 
     RGB[c] = Math.round(interpolate(0, 255, 0, 360, restrict(Math.abs(floatModulo(hue + RGB[c], 360) * 6 - 1080) - 360, 0, 360)), 0); 
    } 
    return webColorFromRGB(RGB); 
} 

特点：

• 接受起始和结束色调从0到360
• 端可于开始下。
• 可以使用值> 360，如果想通过色调进行多次旋转

这里是什么样子：

我希望我的功能就是对你有用！

Answer 3

我做了@BenTaitelbaum的approach一些变化：

var fill = $("#progressFill"); 

var rgb = [], 
    red = [255, 0, 0], 
    green = [0, 255, 0], 
    yellow = [255, 255, 0]; 

function color(val) { 
    if (val < 0.5) { 
     return colorToString(interpolate(val * 2, green, yellow)); 
    } else { 
     return colorToString(interpolate((val - 0.5) * 2, yellow, red)); 
    } 
} 

function interpolate(val, rgb1, rgb2) { 
    for (var i = 0; i < 3; i++) { 
     rgb[i] = Math.floor(rgb1[i] * (1.0 - val) + rgb2[i] * val); 
    } 
    return rgb; 
} 

// quick helper function to convert the array into something we can use for css 
function colorToString(rgb) { 
    return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")"; 
} 

$(function() { 
    $({progress: 0}).animate({progress: 1}, { 
     duration: 4000, 
     step: function (now, fx) { 
      fill.css({ 
       width: (now * 100) + "%", 
       backgroundColor: color(now) 
      }); 
     } 
    }); 
});