使用 jQuery Mobile Slider 对颜色进行动画处理

Question

目前，我正在使用范围为 0 到 10 的范围滑块将背景颜色的不透明度从 0 更改为 1。 这很容易理解。

我真正需要做的是随着滑块值的增加，将颜色从橙色淡化为粉红色。 完全橙色为 0，完全粉红色为 10，两者之间的所有间隔都有褪色/补间效果。 我不知道如何实现这一目标。

这就是我现在拥有的：

$("#slider").change(function() {
    sVal = $(this).val();
    $(this).next().css("background-color", "rgba(217,80,160," + (sVal * 0.1) + ")");
});

我的演示在这里：http://jsfiddle.net/kSP5P/

Answer 1

最简单的方法是规范化滑块值（在本例中将其除以 10），将两个 RGB 值（橙色和粉红色）之间的差异乘以此规范化值，然后将其添加到基本 RGB 值（粉红色）。

这是超级基本的，可能有更好的方法可以做到这一点......但它看起来不错，而且有效。这是我的代码版本：

// RGB values for orange
orangeR = 255;
orangeG = 165;
orangeB = 0;
// RGB values for pink
pinkR = 217;
pinkG = 80;
pinkB = 160;
$("#slider").change(function() {
    // Normalize the slider value (between 0 and 1)
    sVal = $(this).val() / 10.0;
    // Calculated RGB values for our slider
    currentR = parseInt(pinkR + (orangeR - pinkR) * sVal);
    currentG = parseInt(pinkG + (orangeG - pinkG) * sVal);
    currentB = parseInt(pinkB + (orangeB - pinkB) * sVal);
    // Set the slider background color
    $(this).next().css("background-color", "rgb(" + currentR + "," + currentG + "," + currentB + ")");
});

。以及小提琴的修改版本。干杯！