Month: November 2013

Aunque sé perfectamente que tiene que haber mil plugins que hagan esto me he permitido reinventar la rueda porque nunca había hecho un plugin de jQuery y ya tocaba.

Como el formato MNG aún no está soportado en todos los navegadores hay que buscarse las castañas para hacer animaciones con imágenes que llevan transparencia alpha, Este plugin lo que hace es coger una imagen que tiene todos los fotogramas de la animación uno encima del otro, y lo pone como imagen de fondo de un div, cambiando periódicamente la posición de la imagen de fondo para hacer el efecto de animación.

/*
Plugin para animaciones
v1.0
============================================================

Este plugin está pensado para poder tener animaciones tipo GIF pero con
imágenes PNG con transparencia alpha.

Utiliza una imagen en la que los frames están colocados uno encima del otro.
El plugin va cambiando la posición de la imagen de fondo del div para hacer el
efecto de animación.

USO: 

Se crea un div con estos atributos:

* data-spriteImg: URL de la imagen que contiene los frames
* data-numSteps: número de frames en la imagen

Se llama a la función animPic en el div pasando como variable el intervalo
de tiempo entre frames (en milisegundos), que por defecto es 1000.

$("#nuestroDiv").animPic({timeStep: 1000});

============================================================
*/
(function($)
{
    $.fn.animPic = function(options)
    {
        var defaults =
        {
            timeStep  : 1000 // Tiempo entre cambios de imagen (milisegundos)
        };

        options = $.extend(defaults, options);
        if (!this)
            return false;

        return this.each(function()
        {
            var obj;
            var height;
            var spriteimg;
            var numSteps;
            var currentStep = 0;

            obj = $(this);
            spriteImg = obj.attr('data-spriteImg');
            numSteps = obj.attr('data-numSteps');

            var i = $(document.createElement("img"));
            i.load(function()
            {
                height = this.height / numSteps;
                obj.css("width", this.width + "px");
                obj.css("height", height + "px");
                obj.css("background-position", "0 0");
                obj.css("background-image", "url('" + this.src + "')");

                setInterval(function()
                {
                    ++currentStep;
                    if (currentStep == numSteps)
                        currentStep = 0;
                    obj.css("background-position", "0 -" + (currentStep * height) + "px");
                }, options.timeStep);
            });
            i.attr("src", spriteImg);
        });
    };
}(jQuery));