颜色从蓝色跳到蓝色

Question

我正在实施彩色屏幕保护程序。有一个颜色范围和一个滑块。

颜色在（HSB）。有6种颜色。

blue (230, S,B) 
green (130, S,B) 
yellow (55, S,B) 
orange (40, S,B) 
red (0(or 360), S,B) 
violette (315, S,B) 

滑块值从0到14.9

blue 0 - 2.9 green 
green 3 - 5.9 yellow 
yellow 6 - 8.9 orange 
orange 9 - 11.9 red 
red 12 - 14.9 violette 

如果使用滑块值和旧slidervalue和新的滑块值之间的差为2.9下的实际色调将发生变化分解0.5。

现在如果差异大于2.9则必须跳转。这工作正常，直到滑块值小于12。在值12颜色从0更改为360和我的代码不再工作。

// this works fine 
if (lastSlide < 12) { 
      // jump statement 
      if (Math.abs(Math.round(top.fillColor.hue - value)) > 41){ 
       var fillColor = Math.round((Math.abs((value-top.fillColor.hue))/1.05) + Math.min(value, Math.round(top.fillColor.hue))); 
       if (fillColor < 0) fillColor = adjustValue(fillColor); 
       top.fillColor.hue = fillColor; 
      } 
      else if (Math.abs(Math.round(top.fillColor.hue - value)) < 41 && top.counter_dsg < 20){ 
       top.fillColor.hue-= 0.5; 
       top.counter_dsg+=0.5; 
      } 
      else if (Math.abs(Math.round(top.fillColor.hue - setValue())) < 41 && top.counter_dsg > 19){ 
       top.fillColor.hue+= 0.5; 
       top.counter_dsg+=0.5; 
      } 
      else top.fillColor.hue -= 0.5; 
      if (top.counter_dsg > 39) top.counter_dsg = 0; 
     } 
// this not 
else { 
    // jump statement 
    if (Math.abs(Math.round(top.fillColor.hue - value)) > 41){ 
     var fillColor = Math.round((Math.abs((value-top.fillColor.hue))/1.05) - Math.min(value, Math.round(top.fillColor.hue))); 
     if (fillColor < 0) fillColor = adjustValue(fillColor); 
     top.fillColor.hue = fillColor; 
    } 
    else if (Math.abs(Math.round(value - top.fillColor.hue)) < 41 && top.counter_dsg < 20){ 
     top.fillColor.hue-= 0.5; 
     top.counter_dsg+=0.5; 
    } 
    else if (Math.abs(Math.round(value - top.fillColor.hue)) < 41 && top.counter_dsg > 19){ 
     top.fillColor.hue+= 0.5; 
     top.counter_dsg+=0.5; 
    } 
    else top.fillColor.hue -= 0.5; 
    if (top.counter_dsg > 39) top.counter_dsg = 0; 
} 

编辑：

好那好，我们说有屏幕上的画布，我想通过使用滑块以更改画布的颜色。如果没有使用滑块，画布的实际颜色就是swining（+ 10hue，-10hue）。

例如

画布的颜色为蓝色（230色调，S，B），我不使用滑块这样的画布的变化通过添加0,5（计数器的计数值的颜色：20次）之后，0,5将从颜色中分解，直到计数器达到40，然后计数器设置为0.因此，颜色在（220色相，s，b）和（240hue，s，b）之间变动

现在，如果我使用滑块（slidersteps = 0.1），颜色将更改为新值。

在示例 我使用的滑块和滑块值是2,9，然后颜色变成绿色0.5色相。步骤看起来像（230h，s，b），（229.5h，s，b），...，（130h，s，b）。如果（130h，s，b）达到，则颜色开始摆动。

此外，如果新的滑块值比旧的大得多，则旧的颜色到新的颜色的变化必须更快。

示例 滑块值= 11.9，最后一个滑块值= 2,9，它们之间的差值为9.所以如果差别比较大，那么2.9我希望从绿色变为红色更快。所以我决定通过使用这个公式（旧值 - 新值）/ 1.05 +最小[旧值，新值] 步骤看起来像（130h，s，b），（123h，s，b）， ...，（0h，s，b）

此工作正常，直到从红色变为紫色，因为红色的值为0，而下一个的值为360，直到325紫色。所以我很困惑，如何让相同的步骤，像上面这种valuechanges

EDIT2：

1.) yes its the actual hue 
2.) my fault...it's always setValue() - i have declare it above in this ways value = setValue() to use it once time and didn't change it everywhere 
3.) value = setValue() -> the Hue calculated by the slider 
4.) yes 
5.) yes 

Answer 1

在最短路径上从一种颜色变为另一种颜色Joel的答案很好，我不能做得更好。所以我让另一种方法尽可能地接近你已经有的代码，因为你说第一部分工作正常。

在功能setValue()的beforelast线是else c = 360 - m * 15;。将其更改为：

else c = m * -15; 

现在，当sliderValue从12变为15时，此函数将返回负色调，从0到-45。这样，您可以将“跳跃”从0移到315，并且在sliderValue增加时（并且相反），可以持续减少值。由于现在值可以是< 0使用adjustValue()每次将值设置为画布（adjustValue()内部检查< 0所以你需要没有额外的检查）。 然后您发布的所有代码可能如下所示：

var cur = top.fillColor.hue; 
if (cur > 300) cur -= 360; 
var dif = cur - setValue(); 
if (Math.abs(dif) > 41) cur -= Math.round(dif/1.05); 
else { 
    cur += top.counter_dsg < 20 ? -0.5 : 0.5; 
    top.counter_dsg += 0.5 
} 
if (top.counter_dsg > 39) top.counter_dsg = 0; 
top.fillColor.hue = adjustValue(cur); 

Answer 2

我希望我正确的答案，但我真的不知道要了解你要什么做。如果我明白了，你想对颜色变化产生一些过渡效果，对吧？

我提出了一个完全不同的方法，更“数学”，流利。假设您想要在1秒内完成颜色转换，无论从旧颜色跳到新颜色有多大。你只需确定一个“过渡向量”，这将是最短的：如果规模从0到360，向量是：（540 +新旧）％360 - 180.

为什么这样？ “天真”向量只是（新旧）。通过添加360然后模块360，我们确保我们有一个正数。并且通过在模前加180（540 = 180 + 360），然后去掉180后模，我们确定我们有一个范围在[-180,180] =>这是我们想要的最短路径。

例如，使用以下公式：

• 如果旧= 5，新= 10 =>载体是5
• 如果旧= 350，新= 10 =>向量是20
• 如果旧= 350，新= 340 =>矢量是-10

然后，一旦你计算出向量，你就必须把它应用到每个时间帧的颜色值，乘以时间系数。例如：

var v = (540 + newColor - oldColor) % 360 - 180; 
var currentColor = oldColor; 
var delta = 200; // milliseconds 
var timeElapsed = 0; 
var timeFrame = 1000; // 1s 
var hInt = setInterval(function() { 
    if (timeElapsed >= timeFrame) { 
     clearInterval(hInt); 
     currentColor = newColor; 
    } else { 
     timeElapsed += delta; 
     currentColor += v * delta/timeFrame; 
    } 
}, delta); 

“currentColor”会随着时间的推移为您提供正确的颜色。