jQuery - 带有 hsv 颜色空间的颜色循环动画？答案

【问题标题】：jQuery - color cycle animation with hsv colorspace?jQuery - 带有 hsv 颜色空间的颜色循环动画？
【发布时间】：2011-03-01 02:59:28
【问题描述】：

我正在做一个项目，我需要一个特殊的身体背景。背景颜色应该像情绪灯一样在色谱中循环。所以我发现了这个：

http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/

“但是”这个 sn-p 正在使用 RGB 颜色空间，其中包含一些非常浅色和深色的颜色。仅获得明亮的颜色仅适用于 HSV 颜色空间（例如，将 S 和 V 静态设置为 100 并让 H 循环）。我不知道如何转换，实际上如何根据我的需要来拉皮条这个 sn-p。

有人有想法吗？

提前致谢。最好的，弗洛伊德

【问题讨论】：

标签： jquery animation colors cycle hsv

【解决方案1】：

只需使用现成的 RGB 到 HSV 的转换函数，例如：

http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

然后只需将您的颜色输入为 HSV，您将获得可在动画中使用的 RGB。

【讨论】：

您好，感谢您的快速答复。但是我把这个转换器放在哪里呢？我不能把它放在 color.js 中，因为这里的动画师设置为抓取 rgb。如何将转换后的 HSV 输出到动画师？你看，我的问题不是转换器，而是如何集成它。
您好，感谢 Tatu Ulmanen 提供的信息，但它并没有解决我的问题。我仍在使用以下 JavaScript：buildinternet.com/2009/09/…。但我不知道如何使用算法将 RGB 转换为 HSV。有人有空闲时间来处理我的案子吗？我会很高兴的。

【解决方案2】：

ColorJizz 应该是你需要的。

【讨论】：

【解决方案3】：

我相信这就是您想要的效果。 randRange() 函数允许您指定最小值和最大值。

<script language="JavaScript" type="text/javascript">
function randRange(lowVal,highVal) {
     return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
function spectrum(){  
    var hue = 'rgb(' + randRange(100,256) + ',' + randRange(100,256) + ',' + randRange(100,256) + ')';  
    $('#div').animate( { backgroundColor: hue }, 1000);  
    spectrum();  
 }  
$(function(){
    spectrum();
});
</script>

【讨论】：