animation JAVASCRIPT

by Mike Gleeson

HTML

<img id='Animation_Img'/>

CSS

#Animation_Div{
height: 150px;
width: 150px;
background-color: red;
}

JavaScript

var img_srcs = ['http://imgur.com/Q3uAHiD.gif','http://imgur.com/xQW1JUj.gif','http://imgur.com/FULsp3o.gif','http://imgur.com/lpl3HAR.gif','http://imgur.com/v3iKW2O.gif','http://imgur.com/QOQDvk1.gif','http://imgur.com/V2HzBmT.gif','http://imgur.com/r1K8N6t.gif'];

var images = [];

function preload_image_sequence(srcs, img_array, callback, args)
{
    var img = new Image();
    img.onload = function() {
        if(srcs.length) preload_image_sequence(srcs, img_array, callback, args);
        else if(callback) {
            if(args) callback(args);
            else callback();
        }
    };
    img.src = srcs.pop();
    img_array.push(img);
}


function startAnimation(args)
{
    var image_set = args[0];
    var frame_duration = args[1];
    var loop = args.length >= 3 ? args[2] : false;
    for(var i = 0; i < image_set.length; i++)
    {
        var img = image_set[i];
        setTimeout((function(image){
            return function(){
                $("#Animation_Img").attr('src', image.src);
            }
        })(img), frame_duration*i);
    }
    
    if(loop) setTimeout(function(){startAnimation(args);}, frame_duration*image_set.length);
}

var _div = $("#Animation_Img");

function Animate(Image, Duration)
{
    _div.html(Image);
}

preload_image_sequence(img_srcs, images, startAnimation, [images, 100, true]);


var count = 0;
setInterval(function(){
    _div.css('-webkit-filter', "hue-rotate("+count+"deg)");
    count++;
    console.log(count);
}, 50);