Animacje jQuery GIF

Question

Szukam użyć jQuery, aby usunąć potrzebę używania GIF w celu utworzenia dość prostej animacji.

To, czego chcę, to obraz, który składa się z czterech etapów. 1) Nic nie pokazując 2) Pierwsza część obrazu 3) drugiej części obrazu 4) Trzecia część obrazu - Start na

Myślałam, że muszę stworzyć etapy graficznych następnie użyj techniki "zamień bieżący obraz na następny" z jQuery, aby utworzyć animację. To może być całkiem proste dzięki wywołaniom zwrotnym.

Następną częścią jest wyświetlenie animacji w kilku miejscach po zakończeniu poprzedniej animacji. Ponownie może być łatwo z callbackami.

Poszukiwałem tego. Czy to głupie, aby nie używać GIF-ów? Czy można to zrobić za pomocą jQuery?

Answer 1

pierwsze można użyć tle kilka div oddanie części obrazu trzeba

css_background-position

potem trzeba pokazać div, jak trzeba być wyświetlane w zależności od rodzaju animacji trzeba .

Answer 2

Użyj animowanych GIF-ów, do których są przeznaczone. Jestem pewien, że można zhakować razem rozwiązanie za pomocą JQuery, ale zapłaciłbyś za dodatkowy czas i złożoność projektu.

Dodatkowo należy zauważyć, że przechodząc z dostosowanym rozwiązaniem JQuery/CSS, podejmujesz decyzję o ścisłym powiązaniu animacji z wyświetlaną stroną. Co jeśli ktoś chce włączyć animację na innej stronie? Będą musieli skopiować kilka kodu zamiast pojedynczego pliku GIF. Co zrobić, jeśli ktoś chce uwzględnić to w e-mailu lub prezentacji Power Point? Nie można tego zrobić ...

Answer 3

Jeśli będzie to stałe i nie bazujące na zdarzeniach, polecam używanie gifów.

Jeśli jednak animacja jest odpowiedzią na coś, co dzieje się na stronie, lub jeśli chcesz ją uruchomić po załadowaniu wszystkiego, prawdopodobnie jest to droga do zrobienia.

Powinieneś być w stanie zmienić źródło obrazu (lub przesunięcie pozycji, jeśli używasz pojedynczego obrazu), aby zmienić obraz. Spójrz na some "pause" options w jQuery, aby opóźnić zmiany między obrazami.

Nietestowane przykład (pochodzący z odpowiedzią Szymona w linku powyżej):

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

Sprawdź this page for a demo animacji tła z jquery i this na jego kursie.

Sinan.

Answer 5

Czy możliwe jest połączenie czterech zdjęć w ikonkę (1 prawdziwa grafika z wszystkimi czterema obrazami zawierającymi & bez nakładania się)? Z punktu widzenia wydajności, przeglądarka klienta musi pobrać tylko jeden obraz zamiast 4 żądań dla każdego z czterech obrazów.

Tworzenie animacji byłoby tak proste, jak użycie techniki zaproponowanej powyżej przez Damovisa, wykonując ją tylko za pomocą elementu blokowego, ustawiając ten pojedynczy obraz jako tło i ustawiając rozmiar elementu na rozmiar jednego "kafelka" pojedynczego obrazu i zmianę właściwości css w tle. Nie jestem do końca tego pewien (proszę mnie poprawić, jeśli się mylę), ale wydaje mi się, że mniej kosztowna operacja przeniesienia obrazu tła zamiast rzeczywistego zamiany czterech różnych obrazów.

Jeśli chodzi o przenośność i możliwość ponownego użycia, można po prostu utworzyć wtyczkę jQuery, aby móc jej używać w kilku miejscach.

Answer 6

Jest to o wiele łatwiejsze i utrzymuje zdolność łańcuchową:

JQuery:

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

Markup:

<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);