通過RGB空間褪色

對於另一個項目，我們試圖通過RGB顏色空間淡入淡出（從一種顏色到另一種顏色）。作爲概念證明，我們使用JavaScript構建邏輯。作爲最終結果，div的背景應該逐步改變爲給定的顏色。但在我們的示例中，div只是設置爲最終顏色，並沒有顯示開始和結束顏色之間的步驟。通過RGB空間褪色

由於我們無法正常工作，我們的問題：這裏有什麼問題？是邏輯瑕疵還是我們的JS技巧:)？

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
    <script> 
     $(function() { 
     var colors = []; 
      $('#go').click(function() { 
      console.log($('#red1').val()+" "+$('#green1').val()+" "+$('#blue1').val()+" "+$('#red2').val()+" "+$('#green2').val()+" "+$('#blue2').val()); 
       slidecolor($('#red1').val(), $('#green1').val(), $('#blue1').val(), $('#red2').val(), $('#green2').val(), $('#blue2').val()); 
       readArray(); 
      }); 

      function slidecolor(StartsR, StartsG, StartsB, aimR, aimG, aimB) { 
      StartsR = parseInt(StartsR); 
      StartsG = parseInt(StartsG); 
      StartsB = parseInt(StartsB); 
      aimR = parseInt(aimR); 
      aimG = parseInt(aimG); 
      aimB = parseInt(aimB); 
       if(aimR >= StartsR) 
       { 
        var directionR = 1; 
        console.log("größer"); 
        var distanceR = aimR - StartsR; 
       } 
       else 
       { 
        var directionR = 0; 
        console.log("kleiner"); 
        var distanceR = StartsR - aimR; 
       } 
       if(aimB >= StartsB) 
       { 
        var directionB = 1; 

        var distanceB = aimB - StartsB; 
       } 
       else 
       { 
        var directionB = 0; 
        var distanceB = StartsB - aimB; 
       } 
       if(aimG >= StartsG) 
       { 
        var directionG = 1; 
        var distanceG = aimG - StartsG; 
       } 
       else 
       { 
        var directionG = 0; 
        var distanceG = StartsG - aimG; 

       } 

       if((distanceR >= distanceB) && (distanceR >= distanceG)) { var distance = distanceR; } 
       if((distanceG >= distanceR) && (distanceG >= distanceB)) { var distance = distanceG; } 
       if((distanceB >= distanceR) && (distanceB >= distanceG)) { var distance = distanceB; } 

       var stepsR = Math.round(distance/distanceR); 
       var stepsG = Math.round(distance/distanceG); 
       var stepsB = Math.round(distance/distanceB); 
       console.log(distance+" "+distanceR); 
       console.log(stepsR+" "+stepsG+" "+stepsB); 

       var tmpstepsR = 0; 
       var tmpstepsG = 0; 
       var tmpstepsB = 0; 



       for(i=0; i<=distance; i++) { 
       console.log(i); 
        if(i==0) 
        { 
         console.log("FIRST RUN"); 
         if(directionR == 1) { 
          var tmpR = StartsR + 1; 
          tmpstepsR = stepsR; 
         } 
         else 
         { 
          var tmpR = StartsR - 1; 
          tmpstepsR = stepsR + 1; 
         } 
         if(directionG == 1) { 
          var tmpG = StartsG + 1; 
          tmpstepsG = stepsG; 
         } 
         else 
         { 
          var tmpG = StartsG - 1; 
          tmpstepsG = stepsG; 
         }  
         if(directionB == 1) { 
          var tmpB = StartsB + 1; 
          tmpstepsB = stepsB; 
         } 
         else 
         { 
          tmpstepsB = stepsB; 
          var tmpB = StartsB - 1; 
         }       
        } 
        else 
        { 
        console.log("NEXT RUN"); 
         if(((stepsR == i) || (tmpstepsR == i)) && tmpR != aimR) 
         { 
          tmpstepsR = tmpstepsR + stepsR; 
          if(directionR == 1) { 
           var tmpR = tmpR + stepsR; 
          } 
          else 
          { 
           var tmpR = tmpR - stepsR; 
          }       
         } 
         if(((stepsG == i) || (tmpstepsG == i)) && tmpG != aimG) 
         { 
          tmpstepsG = tmpstepsG + stepsG; 
          if(directionG == 1) { 
           var tmpG = tmpG + stepsG; 
          } 
          else 
          { 
           var tmpG = tmpG - stepsG; 
          }       
         } 
         if(((stepsB == i) || (tmpstepsB == i)) && tmpB != aimB) 
         { 
          tmpstepsB = tmpstepsB + stepsB; 
          if(directionB == 1) { 
           var tmpB = tmpB + stepsB; 
          } 
          else 
          { 
           var tmpB = tmpB - stepsB; 
          }              
         }      
        } 
        console.log('rgb('+ tmpR +','+ tmpG +','+ tmpB +')'); 
        colors.push('rgb('+ tmpR +','+ tmpG +','+ tmpB +')'); 
       } 
      } 

      function readArray(){ 

       colors.forEach(function(entry){ 
        timeOut(entry); 
        $('#color').css("background-color", entry); 

       }); 

      } 

      function timeOut(entry){ 

       setTimeout(function(){$('#color').css("background-color", entry);}, 3000); 

      } 

     }); 
    </script> 
    <h1>Farbe 1</h1> 
    red: <input id="red1"> 
    green: <input id="green1"> 
    blue: <input id="blue1"> 
    <h1>Farbe 2</h2> 
    red: <input id="red2"> 
    green: <input id="green2"> 
    blue: <input id="blue2"> 
    <button id="go">LET'S GO</button> 
    <div id="color" style="width:500px;height:500px"></div> 
</body> 
</html>

請注意，有些零件可能有點兒車或醜，因爲它只是第一次嘗試。最後一部分是我們增加了一些時間了一些不得已也可以，不是最好的做法...

編輯：jsfiddle

來源

2015-02-09 globus243

你能提供的jsfiddle – 2015-02-09 09:29:20

http://jsfiddle.net/vxt8u92q/ – globus243 2015-02-09 09:31:39

在readArray，你遍歷所有條目colors陣列英寸這個迭代需要很少的時間（如在，比你注意到的更快）。在即迭代中，全部設置3秒超時。他們沒有排序，他們都只是在forEach完成〜3秒後被執行。

你需要正確的排序回調：

function readArray(){ 
    timeOut(colors, 0); 
} 

function timeOut(array, index){ 
    var entry = colors[index]; 
    $('#color').css("background-color", entry); 
    var nextIndex = index + 1; 

    if(nextIndex < array.length){ 
     setTimeout(function(){ 
      timeOut(array, nextIndex); 
     }, 30); 
    } 
}

基本上，在執行當前的「臺階」的那一刻，你設定爲下一步的超時時間。

Example Fiddle

請注意我的超時設置爲每步30毫秒，所以實際上你可以注意到褪色。

（而不是readArray();，你可以只使用timeOut(colors, 0);，當然，這樣你就可以完全去除readArray）

來源

2015-02-09 09:46:13 Cerbrus

謝謝夢幻般的作品 – globus243 2015-02-09 10:03:01

通過RGB空間褪色

回答

相關問題