加權平均混色

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) 
      }); 
     } 
    }); 
});