jQuery GIF Animationen

Question

Ich möchte jQuery verwenden, um die Notwendigkeit der Verwendung eines GIFs zu entfernen, um eine ziemlich einfache Animation zu erstellen.

Was ich will, ist ein Bild mit vier Stufen. 1) Nichts zeigt 2) Der erste Teil des Bildes 3) Zweiter Teil des Bildes 4) Dritter Teil des Bildes - Start über

Ich dachte, ich würde brauchen, um die Bildstufen erstellen Verwenden Sie dann die Methode "Ersetze das aktuelle Bild durch die nächste" mit jQuery, um die Animation zu erstellen. Das könnte mit Rückrufen recht einfach sein.

Der nächste Teil besteht darin, diese Animation an mehreren Stellen erscheinen zu lassen, nachdem die vorherige Animation geladen wurde. Noch einmal, könnte mit Rückrufen leicht sein.

Ich war nach ein paar Gedanken dazu. Ist es dumm, nicht nur GIFs zu benutzen? Oder könnte das mit jQuery gemacht werden?

Answer 1

Zuerst können Sie den Hintergrund von mehreren div verwenden Sie das Teil des Bildes setzen Sie

css_background-position

benötigen, dann müssen Sie die div zeigen, wie Sie in Abhängigkeit von der Art der Animation angezeigt werden müssen, was Sie brauchen .

Answer 2

Verwenden Sie animierte GIFs - dafür sind sie gemacht. Ich bin mir sicher, dass es möglich ist, eine Lösung mit JQuery zusammen zu hacken, aber Sie würden in der Entwicklungszeit und -komplexität Kosten tragen.

Darüber hinaus sollten Sie erkennen, dass Sie mit einer benutzerdefinierten JQuery/CSS-Lösung entscheiden, Ihre Animation eng mit der Seite zu verknüpfen, auf der sie sich befindet. Was ist, wenn jemand die Animation auf einer anderen Seite einbinden möchte? Sie müssten statt einer einzelnen GIF-Datei eine Menge Code kopieren. Was ist, wenn jemand es in eine E-Mail- oder PowerPoint-Präsentation einbinden möchte? Kann nicht gemacht werden ...

Answer 3

Wenn es konstant und nicht ereignisgesteuert ist, würde ich empfehlen, Gifs zu verwenden.

Wenn die Animation jedoch als Reaktion auf etwas geschieht, das auf der Seite passiert, oder wenn sie nur starten soll, nachdem alles geladen ist, dann ist jQuery wahrscheinlich der richtige Weg.

Sie sollten nur in der Lage sein, die Bildquelle (oder die Positionsverschiebung, wenn Sie ein einzelnes Bild verwenden) zu ändern, um das Bild zu ändern. Sehen Sie sich some "pause" options in jQuery an, um Änderungen zwischen Bildern zu verzögern.

Ungeprüfte Beispiel (abgeleitet von Simons Antwort in dem obigen Link):

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

prüft this page for a demo für Hintergrund-Animation mit jQuery und this für seine Tutorial.

Sinan.

Answer 5

Wäre es möglich, Ihre vier Bilder zu einem Sprite zu kombinieren (1 echte Grafik mit allen vier Bildern enthalten & nicht überlappend)? Aus Performance-Sicht muss der Browser des Kunden nur ein einzelnes Bild herunterladen, statt vier Anfragen für jedes Ihrer vier Bilder zu stellen.

Erstellen der Animation wäre so einfach wie die oben von Damovisa vorgeschlagene Technik, nur mit einem Blockelement, dieses einzelne Bild als Hintergrund setzen und die Größe des Elements auf die Größe einer "Kachel" einstellen des einzelnen Bildes und Ändern der css-Eigenschaft der Hintergrundposition. Ich bin mir da nicht ganz sicher (bitte korrigiere mich, wenn ich falsch liege), aber es scheint eine weniger teure Operation zu sein, ein Hintergrundbild zu verschieben, anstatt vier verschiedene Bilder auszuwechseln.

In Bezug auf Portabilität und Wiederverwendbarkeit können Sie einfach ein jQuery-Plugin erstellen, um es an mehreren Stellen verwenden zu können.

Answer 6

Das ist viel einfacher und pflegt Ketten Fähigkeit:

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