Javascript顏色動畫

我想要在原始javascript中將1色到另一色的動畫（轉換）。Javascript顏色動畫

我不想使用任何框架（jQuery，mootools）或css3。純原始的javascript。

我一直很難做到這一點，有人可以幫我嗎？ :)

2012-07-02 user1437328

你有什麼嘗試？ – antyrat

爲什麼如果你不想使用它，爲什麼會標記jQuery這個問題？ – JJJ

可能的重複[有沒有一種很好的方法來做JavaScript的顏色循環？]（http://stackoverflow.com/questions/480671/is-there-a-good-way-to-do-color-cycling-in -javascript） – JJJ

一種方法可能是使用setTimeout調用一些函數，每次函數調用時都會增量地改變顏色（我假設爲背景顏色）。在每次迭代時，只需檢查是否已達到目標顏色，如果沒有，則根據需要增加或減少RGB值。

來源

2012-07-02 11:28:02 shawesome

也許是這樣的：

lerp = function(a, b, u) { 
    return (1 - u) * a + u * b; 
}; 

fade = function(element, property, start, end, duration) { 
    var interval = 10; 
    var steps = duration/interval; 
    var step_u = 1.0/steps; 
    var u = 0.0; 
    var theInterval = setInterval(function() { 
     if (u >= 1.0) { 
      clearInterval(theInterval); 
     } 
     var r = Math.round(lerp(start.r, end.r, u)); 
     var g = Math.round(lerp(start.g, end.g, u)); 
     var b = Math.round(lerp(start.b, end.b, u)); 
     var colorname = 'rgb(' + r + ',' + g + ',' + b + ')'; 
     el.style.setProperty(property, colorname); 
     u += step_u; 
    }, interval); 
};

您可以將try it out as a jsfiddle周圍玩耍或看看下面的完整工作示例。您可能希望通過使用HSL/HSV顏色來改善這種顏色，這會讓您有一個漂亮的過渡，但我會留給你。

<html> 
<head> 
    <title>Fade</title> 
    <style type="text/css"> 
    #box { 
     width: 100px; 
     height: 100px; 
     background-color: rgb(255,0,0); 
    } 
    </style> 
</head> 
<body> 
    <div id="box"></div> 

    <script type="text/javascript" charset="utf-8"> 
    // linear interpolation between two values a and b 
    // u controls amount of a/b and is in range [0.0,1.0] 
    lerp = function(a,b,u) { 
     return (1-u) * a + u * b; 
    }; 

    fade = function(element, property, start, end, duration) { 
     var interval = 10; 
     var steps = duration/interval; 
     var step_u = 1.0/steps; 
     var u = 0.0; 
     var theInterval = setInterval(function(){ 
     if (u >= 1.0){ clearInterval(theInterval) } 
     var r = parseInt(lerp(start.r, end.r, u)); 
     var g = parseInt(lerp(start.g, end.g, u)); 
     var b = parseInt(lerp(start.b, end.b, u)); 
     var colorname = 'rgb('+r+','+g+','+b+')'; 
     el.style.setProperty(property, colorname); 
     u += step_u; 
     }, interval); 
    }; 

    // in action 
    el = document.getElementById('box'); // your element 
    property = 'background-color';  // fading property 
    startColor = {r:255, g: 0, b: 0}; // red 
    endColor = {r: 0, g:128, b:128}; // dark turquoise 
    fade(el,'background-color',startColor,endColor,1000); 

    // fade back after 2 secs 
    setTimeout(function(){ 
     fade(el,'background-color',endColor,startColor,1000); 
    },2000); 
    </script> 
</body> 
</html>

來源

2012-07-02 12:07:14

這裏也是我的解決方案：

<html><head> 
<script type="text/javascript"> 
<!-- 
function animate(id,color0,color1,duration){ 
    //public attributes 
    this.elem = document.getElementById(id); 
    //private attributes 
    var r0= parseInt(color0.substring(0,2),16); 
    var g0= parseInt(color0.substring(2,4),16); 
    var b0= parseInt(color0.substring(4,6),16); 
    var r1= parseInt(color1.substring(0,2),16); 
    var g1= parseInt(color1.substring(2,4),16); 
    var b1= parseInt(color1.substring(4,6),16); 
    var wait = 100; //100ms 
    var steps = duration/wait; 
    var rstep = (r1 - r0)/(steps); 
    var gstep = (g1 - g0)/(steps); 
    var bstep = (b1 - b0)/(steps); 
    var self = this; 
    //public functions 
    this.step = function() { 
     steps--; 
     if (steps>0) { 
      r0 = Math.floor(r0 + rstep); 
      g0 = Math.floor(g0 + gstep); 
      b0 = Math.floor(b0 + bstep); 
      elem.style.backgroundColor = 'rgb('+r0+','+g0+','+b0+')'; 
      //alert(steps + ' ; ' + elem.style.backgroundColor); 
      window.setTimeout(function(){self.step();}, wait); 
     } else { 
      elem.style.backgroundColor = '#'+color1; 
     } 
    } 
    step(); 
    //alert(this.r0); 
} 
//--> 
</script> 
</head><body> 
<div id="anim" style="width:100px; height:100px; background-color:#ff0000"></div> 
<input type="button" onclick="animate('anim','1122ff','ff2211',1000)" value="test" /> 
</body> 
</html>

html at pastebin，如何調用超時功能 - 例如參見1，2

來源

2012-07-02 12:35:58 Stano

如果畫布將是確定的，你可以嘗試做它像這;）

var context = document.getElementsByTagName('canvas')[0].getContext('2d'); 

var hue = 0; 

function bgcolor() { 
    hue = hue + Math.random() * 3 ; 
    context.fillStyle = 'hsl(' + hue + ', 100%, 50%)'; 
    context.fillRect(0, 0, context.canvas.width, context.canvas.height); 
} 

setInterval(bgcolor, 20);

是的;）它並不完美，只是一個例外，但試試看。這是codepen上的完整筆。

來源

2015-02-12 15:03:57

Javascript顏色動畫

回答

相關問題