(Przepraszam, nie jestem pewien o brzmieniu tytułu).

Chcę zrobić coś typu postępu, które przechodzi z zielonego pomarańczowego, gdy porusza się po ekranie. Na przykład:

enter image description here

Jak mogę znaleźć, jaki powinien być kolor w danym punkcie?

Z góry dziękuję!

1
JJJollyjim 31 lipiec 2012, 12:26

3 odpowiedzi

Najlepsza odpowiedź

Edytuj : Oto link do jsfiddle wdrażający to: http://jsfiddle.net/eam9a/.

Dla najprostszej metody można wykonać liniową interpolację między kolorami. Załóżmy, że postęp przenosi od 0,0 do 1,0, aby ułatwić sprawę. Więc

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

Następnie możemy po prostu interpolować między zieloną i pomarańczą lub między pomarańczową a czerwoną, w zależności od koloru, który chcemy.

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] + ")";
}
5
Ben Taitelbaum 31 lipiec 2012, 09:08

Stworzyłem dla Ciebie własny Finder Color:

Akceptuje odcienie startu i końcowe, liczbę pozycji oraz bieżącej pozycji i zwraca wartość kolorów CSS.

Widzisz, że działa na skrzypce!

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

Funkcje:

  • Akceptuje odcień rozpoczynający i kończący od 0 do 360.
  • Koniec może być niższy niż początek.
  • Może używać wartości> 360, jeśli chcesz obracać się przez przerwy wielokrotnie

Oto jak to wygląda:

Erik's Custom Color Finder

Mam nadzieję, że moja funkcja jest dla Ciebie przydatna!

1
ErikE 31 lipiec 2012, 23:40

Dokonałem pewnych zmian w @bentaaitelbaum Podejście:

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)
            });
        }
    });
});
0
Community 23 maj 2017, 11:53