The Dynamic Duo - Animación Gif

Animación Gif

Cuando es de hacer páginas y animaciones web dinámicas, parece que hace alguna ayuda la utilización de GIF animados. Lamentablemente, GIF's animados no tienen controles - no puedes comenzar, parar o pausar la animación en comando. Aunque es posible de mezclar GIF's animados con GIF's no animados para imitar el efecto. Realmente no trabajan tan bien. Esto los hace dificultosos cuando se trata de hacer alguna cosa compleja con ellos. Es por esa razón que he hecho mi propio Objeto de Animación GIF (GifAnim). Es una pieza de código la cual te da el tipo de control el cual es necesario para cualquier tipo de animación gif en la secuencia que puedas pensar.

Aunque el objeto para Animación Gif es estructurado similarmente que el Objeto Dynamic Layer, es un objeto independiente con su propio set de métodos. Como sea el caso, deberás de mezclar 2 objetos cuando creas una secuencia de animación. Los dos son totalmente compatibles así que no tienes que preocuparte por eso.

Precargar una serie de imágenes

El Objeto GifAnim requiere que tengas una serie de objetos de imágenes precargadas ya creadas que son llamadas algo como imagen0, image1, image2 etc. Donde se encuentra 0 es la primera pantalla de la animación, 1 es el segundo a así continua.

Voy a utilizar las siguientes imágenes para mi ejemplo:

num0.gif
num1.gif
num2.gif
num3.gif
num4.gif
num5.gif

Para precargar esta serie de imagenes he podido utilizar una función precargar que he utilizado en lecciones anteriores

function preload(imgObj,imgSrc) {
	eval(imgObj+' = new Image()')
	eval(imgObj+'.src = "'+imgSrc+'"')
}
preload('num0','num0.gif')
preload('num1','num1.gif')
preload('num2','num2.gif')
preload('num3','num3.gif')
preload('num4','num4.gif')
preload('num5','num5.gif')

Pero nota que mi llamado precargar "preload()" es repetitivo - puedo hacer la misma cosa con un loop:

for (var i=0;i<=5;i++) preload('num'+i,'num'+i+'.gif')

De esta forma podrá ser utilizado para cualquier número de imágenes con solo cambiar argumentos de loop.

Cualquiera que sea el nombre consistente en la serie, es el nombre de la Imagen Series - en mi caso este será el número "num" porque cada nombre del objeto imagen comienza con num. Recuerda que inicialmente tienes que enseñar una de las imágenes y definir el nombre de la imagen, esto es lo que yo estaré utilizando:

<DIV ID="numDiv">
<IMG NAME="numImg" SRC="num0.gif" WIDTH=50 HEIGHT=50 BORDER=0>
</DIV>

Iniciación de los Objetos GifAnim

Iniciación de los Objetos GifAnim tienes que definir 5 cosas:

layer - la capa en que la imagen esta
imgName - el nombre de la imagen (en el tag IMG)
imgSeries - el nombre de Image Series
end - el número del último marco en la animación
speed - la velocidad de repeticion en milesegundos
startFrame - (opcional) el número de cual marco hay que comenzar ( solo necesitado si comienza en un frame que no sea 0)

El formato general para la iniciación es :

objectName = new GifAnim(layer,imgName,imgSeries,end,speed,startFrame)

Para definir mi Objeto GifAnim estaré utilizando el objeto llamado numImgAnim, entonces para iniciar esa animación utilizare:

numImgAnim = new GifAnim('numDiv','numImg','num',5,200)

Si por alguna razón deseo que la animación comience en el marco 3ro (imagen num2.gif) utilizaré en lugar:

numImgAnim = new GifAnim('numDiv','numImg','num',5,2)

Y recuerda que la primera imagen mostrada deberá de ser num2.gif.

Utilizando los métodos GifAnim

El Método play():

El Método play() comienza la animación. Tiene los siguientes argumentos (en grueso es el normal):

loop - true/false - como sea que la animación es para loop o solamente para moverse una sola vez
reset - true/false - ya sea que la animación es para recomenzar el marco primero cuando este haya sido completado
fn - función para ejecutar cuando es completado

Estos argumentos son opcionales, si no especificas ninguno de ellos:

objectName.play()

Este no se loopea, no se recomienza y no hace nada cuando está completado. Pero puedes asignar los que tu quieras.

objectName.play(true)
objectName.play(true,false)
objectName.play(false,true,'alert(\'done\')')  // alert(\'done\') puede remplazarce con cualquier cosa

El método stop() :

El método stop() simplemente para, o mas exacto, pausa la animación:

objectName.stop()

Dependiendo en los argumentos del método play() él hará cosas diferentes cuando esta parado. Si el argumento reset en el método play() es true, se devolverá a la primera pantalla. Si reset es falso, la próxima vez que comienzas la animación empezará donde terminó. Y si fn fue definido, lo evaluará. Si haces un animación looping la fn se evaluará solamente cuando la animación ha parado .

El método vayaAmarco "goToFrame()":

El método goToFrame() trae la animación a cualquier pantalla que desees.

objectName.goToFrame(index)

Donde índex es, es el número del índex de la Imagen Series - 0 es la primera imagen en la serie, 1 es la segunda y así continua.

Hay otro método, run(), el cual es la lógica detrás de un Objeto GifAnim, pero nunca debes de llamar a ese método porque no hace ningún chequeo de error para estar seguro que no se ejectuen instancias múltiples de una animación.

Ejemplo: gifanim1.html[fuente] para un ejemplo utilizando todos los métodos.

Fuente de Código

gifanim.js