jQuery GIF Animaciones

Question

Estoy buscando utilizar jQuery para eliminar la necesidad de utilizar un GIF para crear una animación bastante simple.

Lo que quiero es una imagen para tener cuatro etapas. 1) Nada mostrando 2) La primera parte de la imagen 3) Segunda parte de la imagen 4) Tercera parte de la imagen - Empezar de nuevo

Estaba pensando que había necesidad de crear las etapas de imagen luego use la técnica 'reemplazar la imagen actual con la siguiente' con jQuery para crear la animación. Eso podría ser bastante fácil con devoluciones de llamadas.

La siguiente parte es que esta animación aparezca en varios lugares después de que la animación anterior haya terminado de cargarse. Una vez más, podría ser fácil con devoluciones de llamadas.

Estaba buscando algunas ideas sobre esto. ¿Es estúpido no solo usar GIF? ¿O podría hacerse esto con jQuery?

Answer 1

primer lugar se puede utilizar el fondo de varias div poner la parte de imagen que necesita

css_background-position

entonces usted tiene que mostrar el div como sea necesario para que se muestre en función del tipo de animación que necesita .

Answer 2

Use GIF animados - esto es para lo que están hechos. Estoy seguro de que es posible hackear juntos una solución utilizando JQuery, pero pagaría un costo adicional en tiempo de desarrollo y complejidad.

Además, debe reconocer que, al utilizar una solución JQuery/CSS personalizada, está tomando la decisión de acoplar estrechamente su animación a la página que está activa. ¿Qué pasa si alguien quiere incluir la animación en una página diferente? Tendrían que copiar un montón de código en lugar de un solo archivo GIF. ¿Qué pasa si alguien quiere incluirlo en un correo electrónico o una presentación de Power-point? No se puede hacer ...

Answer 3

Si va a ser constante y no orientado a eventos, recomiendo usar gifs.

Si, sin embargo, la animación es en respuesta a algo que sucede en la página, o si solo quiere que comience después de que todo está cargado, entonces jquery es probablemente el camino a seguir.

Solo debe poder cambiar el origen de la imagen (o el desplazamiento de posición si está usando una sola imagen) para cambiar la imagen. Eche un vistazo a some "pause" options en jQuery para retrasar los cambios entre las imágenes.

ejemplo no probado (derivado de la respuesta de Simon en el siguiente enlace):

function chg1() { $('#myimage').attr('src', ''); } 
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); } 
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); } 
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); } 

function StartAnimation() { 
    setTimeout(chg1, 2000); // blank after 2 seconds 
    setTimeout(chg2, 4000); // img 1 after 4 seconds 
    setTimeout(chg3, 6000); // img 2 after 6 seconds 
    setTimeout(chg4, 8000); // img 3 after 8 seconds 
    setTimeout(StartAnimation, 8000); // start again after 8 seconds 
} 

StartAnimation(); // start it off 

Answer 4

Comprobar this page for a demo para la animación de fondo con jQuery y this por su tutorial.

Sinan.

Answer 5

¿Sería posible combinar sus cuatro imágenes en un sprite (1 gráfico real con las cuatro imágenes incluidas & sin superposición)? Desde el punto de vista del rendimiento, el navegador del cliente solo tiene que descargar una sola imagen en lugar de hacer 4 solicitudes para cada una de las cuatro imágenes.

Crear la animación sería tan simple como utilizar la técnica sugerida anteriormente por Damovisa, solo hacerlo usando algún elemento de bloque, configurando esta imagen como fondo y configurando el tamaño del elemento al tamaño de un "mosaico" de la imagen individual, y cambiar la propiedad css de posición de fondo. No estoy completamente seguro de esto (corrígeme si me equivoco), pero parece una operación menos costosa para mover una imagen de fondo en lugar de cambiar cuatro imágenes diferentes.

En cuanto a la portabilidad y reutilización, puede crear un plugin de jQuery para poder usarlo en varios lugares.

Answer 6

Esto es mucho más fácil y mantiene cadena-capacidad:

JQuery:

$(document).ready(function(){ 
    //rotator - delay, children 
    $('#slideshow').rotator(50, 'img'); 
}); 

de marcado:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.rotator.js"></script> 

<style type="text/css"> 
#slideshow { 
    position:absolute; //or whatever you need 
    display:block; 
    top:0px; 
    left:0px; 
} 
#slideshow img { 
    position:absolute; 
    opacity:0; 
} 
</style> 

<!-- SLIDESHOW --> 
<div id="slideshow"> 
    <img src="images/1.png"> 
    <img src="images/2.png"> 
    <img src="images/3.png"> 
</div> 

Plugin:

(function($){ 
    $.fn.rotator = function(delay, child){ 
     //set curImage val 
     var currImg = 0; 
     var currIt = true; 
     //set array of images 
     var ss = $('#slideshow').children(child); 
     var ssize = ss.size(); 
     setInterval(function() { 
      if(currIt){ 
       $(ss[currImg]).css('opacity','1'); 
       currIt = !currIt; 
      }else if (!currIt){ 
       $(ss[currImg]).css('opacity','0'); 
       $(ss[currImg+1]).css('opacity','1'); 
       currIt = !currIt; 
       currImg++; 
      } 
      //reset 
      if(currImg >= ssize){ 
       currImg = 0; 
       $(ss[currImg]).css('opacity','1'); 
      } 
     }, delay); 
     return this; 
    }; 
})(jQuery);