可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to animate (transition) from 1 color to another in raw javascript.

I dont want to use any framework (jquery, mootools) or css3. plain raw javascript.

I have been really having trouble to do this, can someone help me out ? :)

回答1:

maybe something like this:

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);
};

You can play around an try it out as a jsfiddle or check out the full working example below. You might want to improve this by using HSL/HSV colors, which gives you a prettier transition, but i'll leave that up to you.

<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>

回答2:

Here is also my solution:

<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, how to call the timeout function - see for example 1, 2

回答3:

if canvas would be ok you could try doing it like this ;)

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 );

Yes ;) it`s not perfect and just an excample but give it a try. Here is the complete pen on codepen.

回答4:

One way might be to use setTimeout to call some function which incrementally changes the colour (I'm assuming background-color) by some small amount each time it's called. At each iteration, just check to see if you've arrived at your target colour and if not, increase or decrease your RGB value as necessary.