Animation in HTML without lag

Question

I am trying to create a spinning animation using HTML and jQuery.

I have tried two different ways:

1) Wrote my custom animation function to make the animation happen.

    $(window).load(function() 
    {
        $(".vfx_1").css({width:'550px', height:'400px', position:'absolute', top: '250px', left: '150px'});

        //40 milliseconds for 1 frame
        //always put the width, height, and position of the vfx and rushers to the first array
        //multipliers for background image from left, top, interval, visibility flag(false by default, true for hidden), absolute top, absolute left,
        //width, height

        var vfx_1_anim = [[0,0,40,false,0,0,550,400],[0,1,40,false],[0,2,40,false],[0,3,40,false],[0,4,40,false],[0,5,40,false],[0,6,40,false],[0,7,40,false],[0,8,40,false],[0,9,40,false],[1,0,40,false],[1,1,40,false],[1,2,40,false],[1,3,40,false],[1,4,40,false],[1,5,40,false],[1,6,40,false],[1,7,40,false],[1,8,40,false],[1,9,40,false],[2,0,40,false],[2,1,40,false],[2,2,40,false],[2,3,40,false],[2,4,40,false],[2,5,40,false],[2,6,40,false],[2,7,40,false],[2,8,40,false],[2,9,40,false]];

        //_animate('.blitzbot', 'timeout.png', blitz_anim);
        _animate('.bottom_rotator', 'bottomTurning.png', vfx_1_anim);

        function _animate(class_name, bg, anim, hide)
        {
            var hide = (typeof anim[0][3] === "undefined") ? false : anim[0][3];

            if(hide) $(class_name).css("visibility", "hidden");
            else $(class_name).css("visibility", "visible");

            $(class_name).css({background:"url("+ bg +") "+ (-anim[0][0] * $(class_name).width()) + "px "+ (-anim[0][1] * $(class_name).height())  +"px"});
            if(typeof anim[0][4] != "undefined") $(class_name).css("top", anim[0][4]);
            if(typeof anim[0][5] != "undefined") $(class_name).css("left", anim[0][5]);
            if(typeof anim[0][6] != "undefined") $(class_name).css("width", anim[0][6]);
            if(typeof anim[0][7] != "undefined") $(class_name).css("height", anim[0][7]);
            anim.splice(0,1);

            if(anim.length>0)
            {
                setTimeout(function() 
                {
                    _animate(class_name, bg, anim);
                }, anim[0][2]);
            }   
        }
    });

2.SPRITELY

In both the cases , my animation runs pathetically slow. In the vfx_1_anim , I have gone only upto 30 frames but actually , there are 100 frames. The size of the png sequence image is around 55000 x 400 for the spritely code and around 5500x4000 for the custom animation code.

I couldn't create a fiddle because I couldn't find a free image hosting site to which I can upload images and not get them scaled down automatically.

My Question : How do I create an animation which doesn't suffer due to the large image size and number of frames. Would canvas be a good option ? Link to the image which I am using for spritely animation.

IMAGE

Thanks!

Answer 1

Since canvas is in your question, I'm assuming CSS3 (in a modern browser) is also an option.

.spinner {
    width: 550px;
    height: 400px;
    background-image: url("http://fc04.deviantart.net/fs71/f/2013/202/5/e/bottom_turning_1_by_skyrbe-d6ehlac.png");
    animation: play 1s steps(100) infinite;
}

@keyframes play {
   from { background-position: 0px; }
     to { background-position: -55000px; }
}

http://jsfiddle.net/xCv3L/1/

It's HTML5 / CSS3 only. Of course you could use javascript to manipulate the css styles and customize parameters like animation speed or background image.

A few notes:

• There's some initial stuttering on jsfiddle. Preloading the image may help? A local copy has no stuttering on my pc.
• base idea comes from http://jsfiddle.net/simurai/CGmCe/