Geek asks and answers

Javascript color animation

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

I do not want to use any framework (jquery, mootools) or css3. simple raw javascript.

I really had problems with this, can someone help me? :)

+5
source share
4 answers

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 try it as jsfiddle or see the full working example below. You can improve this by using HSL / HSV colors, which gives you a more beautiful transition, but I will leave it 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>
+14
source

Here is 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, - - . 1, 2

+2

, :)

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.

+1

, setTimeout , ( ) , . , , , RGB .

0
source

More articles:


All Articles