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颜色动画

回答

相关问题