Linear Color Animation

by pajtai

HTML

<div id="other"></div>

CSS

#other {
  width: 100px;
  height: 100px;
  margin: 100px auto 0;
}

JavaScript

(function(document) {
  var r = 0, g = 1, b = 2,
      body = document.getElementsByTagName('body')[0],
      easing = {
        easeInOutSine: (function () {
          var cache = {};
          return function(t) {
            if (! cache[t]) {                      
               cache[t] = -1/2 * (Math.cos(Math.PI*t) - 1)
            }
            return cache[t];
          };
	      }())       
      },
      
      // random int between min / max inclussive
      getRandomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      // Return [r, g, b]
      getRandomColor = function() {
        return [getRandomInt(0,255), getRandomInt(0,255), getRandomInt(0,255)];
      },
      
      // change the color of an element from start to end in time and fire callback when done
      // pass in optional easing function
      changeColors = function(start, end, time, ellie, callback) {

        // All numbers as floats. We'll round as  we go.
        var   fps = 60,
              round = Math.round,
              changeR = start[r] - end[r],
              changeG = start[g] - end[g],
              changeB = start[b] - end[b],
              dt = 1000 / fps,
              dr = dt * changeR / time,
              dg = dt * changeG / time,
              db = dt * changeB / time,
              current = [start[r], start[g], start[b]],
              startTime = new Date().getTime(),
              colorString = function(color) {
                return "rgb(" + color[r] + "," + color[g] + "," + color[b] + ")" ;
              },
              engine, 
              rounded,
              ease = easing.easeInOutSine;
        
        ellie.style.backgroundColor = colorString(start);
        
        engine = setInterval(function() {
          
          var now = new Date().getTime(),
              timeNorm = (now - startTime) / time;
          
          if (now - startTime >= time) {
            clearInterval(engine);
        ...