como arreglo esta animacion?

[icm9]

Estuve tratando de hacer una animacion mostrando una secuencia de imagenes, lo hice asi:

Código Javascript:

function animacion(){
    var anim = $('#animacion');
    var imagenes = new Array(15);
    imagenes[0]="url('imagenes/100.bmp')";
    imagenes[1]="url('imagenes/101.bmp')";
    imagenes[2]="url('imagenes/102.bmp')";
    imagenes[3]="url('imagenes/103.bmp')";
    imagenes[4]="url('imagenes/104.bmp')";
    imagenes[5]="url('imagenes/105.bmp')";
    imagenes[6]="url('imagenes/106.bmp')";
    imagenes[7]="url('imagenes/107.bmp')";
    imagenes[8]="url('imagenes/108.bmp')";
    imagenes[9]="url('imagenes/109.bmp')";
    imagenes[10]="url('imagenes/110.bmp')";
    imagenes[11]="url('imagenes/111.bmp')";
    imagenes[12]="url('imagenes/112.bmp')";
    imagenes[13]="url('imagenes/113.bmp')";
    imagenes[14]="url('imagenes/114.bmp')";
    var i=0;
    var intervalID = setInterval(function(){
        i++;
        if(i>=14)clearInterval(intervalID);
        anim.css('background-image',imagenes[i]);
 
    },100);
}
 

y se muestra la secuencia de imagenes, pero titilando entre cada transicion, lo que hace que pierda su efecto de animacion, como puedo hacer para que se vea mas suave y no titile?

[lauser]

En bmp una animación?, No sera mejor en gif o png?

[icm9]

Iniciado por lauser

En bmp una animación?, No sera mejor en gif o png?

Es una secuencia de imagenes .bmp, quiero que quede como una animacion al mostrar la secuencia de imagenes rapidamente, no quiero hacer un gif. Quiero hacer la animacion como te explique arriba.

[Alexis88]

Podrías hacerlo así (un ejemplo):

Código Javascript:

var imagenes = ["imagen1.png", "imagen2.png", "imagen3.png"],
    total = imagenes.length,
    contador = 0,
    anim = $("#animacion");
 
//Muestro la primera imagen al carga la página
anim.css("background-image", "url(" + imagenes[contador] + ")");
 
//Mediante el temporizador setInterval, cambio la imagen cada 0.25 segundos
setInterval(function(){
    //Actualizo el valor del contador
    contador = contador == total - 1 ? 0 : ++contador;
 
    //Asigno a la imagen que corresponda según el contador
    anim.css("background-image", "url(" + imagenes[contador] + ")");
}, 250);
 

Saludos

[CHuLoSoY]

Para que no se tilde debes usar imágenes bien comprimidas (bmp normalmente pesa mucho) y hacer un sprite (todas las imágenes dentro de un mismo fichero). Esto lo controlarías con background-position: x/y y ya no se tildaría nunca más. Podrías acelerarlo a 50 milisegundos y no se notaría la carga de la imagen, pues la imagen que debe cargar sería una sóla y no 15.

Saludos.