Ich hätte gerne einen animierten Charakter auf der Seite mit verschiedenen Animationen für verschiedene Verhaltensweisen. Ich habe derzeit zwei Ideen, wie es funktionieren könnte:
IDEA 1: Jedes Verhalten als animiertes GIF verwenden und JavaScript verwenden, um GIF-Dateien beim Wechseln des Verhaltens zu wechseln. Upside: Animationen sind im Bild selbst und lassen weniger Arbeit für JS. Nachteil: Keine Möglichkeit, JavaScript zu erkennen, in welchem Frame sich das GIF befindet, wann die Animation endet / Schleifen usw.
IDEA 2: Lassen Sie jeden Frame jeder Animation als PNG-Bild und verwenden Sie JS, um zwischen Frames zu wechseln, mit einigen Preloader, um sicherzustellen, dass alle Bilder bereit sind, bevor die Animation beginnt. Upside: Viel mehr Kontrolle über die Animationssequenz. Nachteil: Viele Frames ...
Welche dieser beiden Ideen wäre besser? (Ich möchte vermeiden, Flash dafür zu verwenden, btw)
Ich lehne mich selbst der Idee 2 zu, um sie besser kontrollieren zu können. Da die Site bereits einen Timer hat, der alle 50 ms läuft, wäre es nicht viel, diese Animation zu diesem Timer-System hinzuzufügen.
Ich weiß, das ist alt, aber ich würde Option 3 geben, was etwas ähnlich wie Option 2 mit einer Wendung ist.
Anstatt Frames zu laden, müsstest du eine große spritemap mit allen Frames und möglicherweise einer Karte aller Animationen + Koordinaten laden. Sie hätten das Sprite als Hintergrund für ein Div mit der richtigen Dimension. Sie müssten das Hintergrundbild einfach in den rechten Rahmen verschieben.
Sie könnten alle Events in einer anderen Zeile haben und jede Animation in einer anderen Spalte. Dadurch wird ein Raster erstellt, das Sie leicht steuern können.
Plus
Minus
Idee 1 funktioniert nicht, da JavaScript den aktuellen Frame eines animierten GIFs nicht kontrollieren kann - weder über Browser hinweg, noch über eine spezifische (ActiveX / Mozilla-spezifische) Erweiterung, die ich kenne.
Ich denke, Sie bleiben bei Idee 2. Ich weiß nicht, wie glatt die Ergebnisse sind, die Sie mit dieser Methode erreichen können, obwohl - Sie müssten testen.
Für Idee 1 könnten Sie die Methode setTimeOut() verwenden, um ein Ereignis nach der Zeit auszulösen, die der GIF für die Schleife benötigt. Das Problem dabei ist jedoch, dass das GIF möglicherweise zu einem anderen Zeitpunkt als das Javascript startet.
Persönlich würde ich für Idee 2 gehen; Solange die Bilder relativ klein sind, lädt der Client alle Bilder ziemlich schnell herunter (ein 16x16px PNG ist ~ 500 Bytes). Der Client-Computer wird keine Probleme haben, die Frames zu verschieben.
Eine andere Idee wäre, alle Frames untereinander in einem langen Bild zu platzieren und CSS und jQuery (oder Vanilla-JavaScript) zu verwenden, um die CSS background-position -Eigenschaft alle 50 ms zu ändern. Dies würde ein kleineres Bild und vielleicht ein bisschen weniger Codierung bedeuten.
Sie sollten sich vielleicht freezeframe.js ansehen. Es verwendet ein canvas-Element, um das erste Bild aus einem GIF zu extrahieren, um es anzuhalten.
Tags und Links javascript image animation gif