GIFS WIP : ANIMATING IN ONE CIRCLE

by Nick Hulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="canvas1" style="z-index:1;"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var animloop, tryToLoadNextImage, giframe, urls;
can.width = window.innerWidth;
can.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;

animloop = function () {
    requestAnimationFrame(animloop);

};

tryToLoadNextImage = function () {
    gif = GIF('http://i.imgur.com/UQwZdTu.gif');
    gif.on("error", tryToLoadNextImage);
    gif.on("rendered", animloop);
    return gif.render();
};

redraw = function (mouse) {
    
    animloop = function () {
        requestAnimationFrame(animloop);
        ctx.save();
        ctx.beginPath();
        ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
        ctx.clip();
      //  imageSmoothing(true);
        ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        ctx.restore();

    };
}

can.addEventListener("mousemove", function (e) {
    var mouse = {
        x: e.pageX,
        y: e.pageY
    };

    redraw(mouse);
}, false);


window.imageSmoothing = function (a, context) {
    var c;
    if (a == null) {
        a = false;
    }
    if (context == null) {
        context = ctx;
    }
    c = context;
    c.webkitImageSmoothingEnabled = a;
    c.mozImageSmoothingEnabled = a;
    return c.imageSmoothingEnabled = a;
};


tryToLoadNextImage();

"use strict";if(!Date.now)Date.now=function(){return(new Date).getTime()};(function(){var n=["webkit","moz"];for(var e=0;e<n.length&&!window.requestAnimationFrame;++e){var i=n[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"];window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var a=0;window.requestAnimationFrame=function(n){var e=Date.now();var i=Math.max(a+16,e);return setTimeout(function(){n(a=i)},i-e)};window.cancelAnimationFrame=clearTimeout}})();