it-swarm.com.de

Animiertes .GIF vs Spritesheet + JS/CSS

Welches lässt sich am besten für Leistung, Dateigröße (und meine Vernunft) skalieren: Animierte .gifs oder Spritesheet mit Animationen, die CSS verwenden (und JS, wenn es sein muss)?

Dateigröße

Ich bin mir ehrlich gesagt nicht sicher, was hier besser wird, da ich die Komprimierung von Frames in .gif nicht verstehe. Meine Vermutung wäre, dass sie ungefähr gleich enden würden, wenn ich es richtig schwingen könnte, aber wenn dies falsch ist oder wenn dies ein anderer Grund ist, lassen Sie es mich wissen.

Der Hauptvorteil hier in meinen Augen ist Spritesheets, da ich mehrere Animationen auf einem einzigen Blatt einfügen könnte (und wir sprechen hier von hunderten von animierten Sprites). Und basierend auf einer meiner vorherigen Fragen weiß ich, dass ich mit image-rect() leicht einen einzigen Frame in CSS herausziehen kann. Wo wie bei einer .gif-Datei kann ich wirklich nur eine Animation einfügen, da jede davon wahrscheinlich eine andere Dauer hat.

Nachtrag: Außerdem werden einige Animationen für ein gegebenes Sprite wiederholt, sodass das Spritesheet nur eine Kopie der Frames enthalten muss, wobei ein .gif alle Frames (zumindest für meine Wissen).

Performance

Wenn ich hier noch einmal erraten würde, sagt mir meine Intuition, dass animierte .gifs wesentlich schneller sein werden, da ich nicht alle Animationen gleichzeitig verwalten muss, wenn ich viel JS-Code für andere Dinge mache. Aber ich weiß nicht genau, ob Browser mit 30+ animierten .gifs einen signifikanten Treffer erzielen.

Meine Vernunft

Die Spritesheets sind für mich gemacht, daher wäre meine Arbeit am Anfang hoch (Schreiben und Animations-Engine und Handcodierung eines/jedes Blattes). Einmal geschrieben, ist es jedoch für immer nutzbar und eine Änderung in einer Spritesheet erfordert nur minimale Codeänderungen.

Auf der anderen Seite sind animierte .gif-Dateien kein Kuchen in Photoshop (wenn Sie ein besseres Programm haben, bitte lass es mich wissen). Und jeder muss von Hand gefertigt sein und ist ein langer Prozess. Aber wenn sie erst einmal fertig sind, muss ich sie nicht wirklich ändern. Meine Spritesheets werden sich wahrscheinlich nicht sehr schnell ändern, also besteht die Chance, dass es eins wird.

Meine Frage (tl; dr)

Was sich besser an Hunderte von Animationen anpassen lässt, in Bezug auf die Dateigröße (einschließlich der Übertragung von HTTP-Headern über das Internet), die Leistung in modernen Browsern und die einfache Erstellung (niedrigste Priorität, aber wenn Sie meinen Job erleichtern können) , oder argumentieren Sie, ich wäre dankbar), Animated .gif-Dateien, die aus Spritesheets erstellt wurden, oder einfach mit CSS und den Spritesheets, die ich bereits habe?

Beispiele

Animated Sprite (60 frames) VS Same animation with spritesheet

29
Ktash

Da ich neugierig war, habe ich es in Javascript implementiert.

JSFIDDLE-DEMO(bearbeitetes Bild Host nach Kommentar).

Was ich herausgefunden habe:

  • Es klappt! Und besser als erwartet.
  • Die CPU-Auslastung ist tatsächlich niedrig (habe es nicht in IE6-Dinosaurier getestet und ich bin sicher, dass es "Korrekturen" erfordern würde).
  • Die Größe kann abgeschnitten und/oder die Qualität signifikant erhöht werden (quellenabhängig).
  • Im Gegensatz zu Mikey G's Konzept funktioniert dies auch, wenn Sie die Ansicht vergrößern oder verkleinern (versuchen Sie es in beiden).
  • Es erlaubt eine variable Bilddauer wie bei einem GIF.
  • Mit mehr Arbeit könnte es sogar eine spielerähnliche API (Pause/Resume, Fastforward, Überspringen usw.) geben.
  • Nutzt andere Formate: 8-Bit-Alpha-PNG, progressives JPEG, <canvas>, SVG, WebP ...

Mehr Infos auf der JsFiddle-Demo-Seite.

16
Camilo Martin

Ich wollte das nur abwägen. Es gibt viele Szenarien, in denen Sie mehrere Animationen auf einer Seite haben. In dem Szenario, in dem sich mehrere Animationen auf derselben Seite befinden, die interaktiv sind. Es ist besser, ein Sprite-Sheet mit CSS-Animationen als GIFs zu verwenden. Hier sind meine Demos:

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_Sprite/

wie Sie sehen, bewältigt die Sprite-Version die Roll-Overs mit Leichtigkeit, während die GIF-basierte Version zum Stillstand kommt.

Auch dies ist nur ein Szenario, das jedoch nützlich sein könnte. Es ist auch ein guter Code-Snippet.

Danken.

13
chrisallick

Update:

In der Zeit, seitdem ich das zum ersten Mal gepostet habe, hatte ich mehr Glück, wenn Sprite-Blattanimationen in Browsern verwendet wurden. Haben sich die Browser/Computer verbessert oder habe ich nur etwas falsch gemacht? Ich habe keine Ahnung. In jedem Fall ist diese Antwort etwas veraltet, aber ich lasse sie hier aus historischen Gründen. Es gibt bessere, neuere Antworten, die heute relevanter sind.


GIFs funktionieren gut mit GPU-Beschleunigung, da aufgrund der partiellen Frame-Aktualisierungen nur ein Teil der Pixel neu gezeichnet werden muss. Im Gegensatz zum GPU-freien Zeichnen muss der Browser nicht alle Pixel in jedem Frame neu zeichnen. Mit einem Sprite-Arbeitsblatt erzwingen Sie das letztere trotzdem, da Sie meist transparente Ebenen nicht überlappen. Daher bieten GIFs insbesondere in modernen Browsern definitiv eine bessere Leistung.

GIFs haben offensichtlich den Nachteil, dass sie auf 256 Farben beschränkt sind, aber basierend auf Ihrem Beispiel sollte dies kein Problem sein. Wenn Sie jedoch Sprite-Sheets verwenden, wird dies sicherlich zu einem Problem, und Sie können keine GIF verwenden. Dies bedeutet höchstwahrscheinlich eine schlechtere Kompression. Da Sie große Flächen einfarbig, viele horizontale Wiederholungen und wenige Farben in einem bestimmten Bereich haben, werden Sie von der GIF-Implementierung von Lempel-Ziv (-Welch) compression sehr profitieren.

6
Zenexer

Ich würde mir das mal ansehen:

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

Ich persönlich denke, Sie wären verrückt, ein Spritesheet zu verwenden, aber ich denke, es hängt davon ab, wie viele animierte Gifs Sie sonst bringen müssen

Ich weiß nicht, was Ihre Einschränkungen sind, aber hier ist eine Geige mit CSS3 step(), um ein Spritesheet zu animieren:

http://jsfiddle.net/simurai/CGmCe/

5
Mikey G

Animierte GIFs bieten nur binäre Transparenz (ein Pixel ist transparent oder völlig undurchsichtig). Aus diesem Grund sehen die meisten animierten Gifs auf transparenten Hintergründen schlecht aus, da Sie kein Antialiasing anwenden können (wie Ihr Eichhörnchen würde ein Antialiasing dort Wunder bewirken).

Wenn Sie eine PNG-24-Transparenzqualität wünschen, müssen Sie sich für animierte Sprites entscheiden.

Animierte Sprites funktionieren auch wirklich gut, wenn Sie sie auf einer Leinwand zeichnen. Schau dir das an: http://seb.ly/demos/bunnybench/bunnies_canvas.html

2
monzonj

Ein weiteres Problem im Zusammenhang mit CSS-Sprites, zumindest in den aktuellen Browsern, ist die Skalierung von "Jitter". Sie können die GIF-Datei auf die gewünschte Größe skalieren (vermutlich kleiner), aber wenn Sie versuchen, den CSS-Sprite zu skalieren, kommt es aufgrund von Rundungsfehlern zu Jitter (Hintergrundposition basiert auf den skalierten Koordinaten und nicht auf dem Original). Wenn jemand einen anderen Weg kennt, mit skalierten animierten Sprites umzugehen, wäre das großartig zu wissen.

Mit ImageMagick können Sie animierte GIFs oder Sprites erstellen.

1
Dave Griffin

GIF-Animationen können Sprites wiederholen, sie können auch Teilbildaktualisierungen verwenden und dasselbe Sprite an verschiedenen Positionen positionieren. Wenn Sie einfach eine nicht interaktive Animation anzeigen möchten, würde ich sagen, dass animierte Gifs alle Vorteile bieten. Abgesehen von Farbe müssen Sie eine 256-Farben-Palette verwenden.

Ich erinnere mich an die Verwendung von Microsoft GIF Animator , das ist sicherlich einfach zu bedienen. Ich weiß nichts über Photoscape , aber im Internet ist das eine gute etwas schwerere Alternative.

1
aaaaaaaaaaaa

Wenn Sie hunderte von Sprites sprechen, dann fahren Sie mit .gif fort. Je komplexer die Animation, desto mehr Animationen gibt es, desto höher ist die Belastung des Browsers, da mehr Ressourcen verwendet werden, um die Animation "Folie für Folie" zu rendern, anstatt die animierte GIF-Datei selbst abspielen zu lassen.

Dies wird noch schlimmer, wenn Sie die Cross-Browser-Kompatibilität in Betracht ziehen, bei der IE wie immer viel versagt. Ich habe noch nie einen Site-Choke auf vielen kleinen .gifs gesehen, aber ich sehe ständig Choke auf einem einfachen Javascript. Ich kann mir nur vorstellen, wie schlimm es werden würde, wenn hunderte von animierten css/js-Bildern ständig gedreht werden.

Wenn Sie nichts dagegen haben, zu fragen, für welche Art von Website sind diese Animationen gedacht? Ist es eine Art Animationsmappe oder ...?

0
Sotkra