Animiertes GIF in HTML5-Leinwand

Question

In HTML5, wie kann ich einfach (bitte nicht zu komplexen Code) ein animiertes GIF auf einem Canvas zeichnen, das funktioniert (mit drawImage wird nur das erste Frame im Canvas angezeigt)?

Answer 1

Ich glaube, du suchst nach http://slbkbs.org/jsgif

Leider stellt das DOM keine einzelnen Frames eines GIFs zur Verfügung, daher wird dies durch Herunterladen des GIFs (mit XMLHttpRequest), Parsen und Zeichnen auf einemgemacht.

Answer 2

Nun, wenn die automatische Leinwandanimation von GIF-Dateien nicht verfügbar ist, könnten Sie versuchen, Spritesheets zu verwenden, aber das würde in der Tat etwas mehr Code erfordern.

var img_obj = {
    'source': null,
    'current': 0,
    'total_frames': 16,
    'width': 16,
    'height': 16
};

var img = new Image();
img.onload = function () { // Ausgelöst, wenn das Bild fertig geladen wurde.
    img_obj.source = img;  // wir setzen die Bildquelle für unser Objekt.
}
img.src = 'img/filename.png'; // enthält ein Bild der Größe 256x16
                              // mit 16 Frames der Größe 16x16

function draw_anim(context, x, y, iobj) { // context ist der Canvas 2D-Kontext.
    if (iobj.source != null)
        context.drawImage(iobj.source, iobj.current * iobj.width, 0,
                          iobj.width, iobj.height,
                          x, y, iobj.width, iobj.height);
    iobj.current = (iobj.current + 1) % iobj.total_frames;
                   // aktuelles Frame inkrementieren und Animationsschleife sicherstellen
}

function on_body_load() { // ...
    var canvas = document.getElementById('canvasElement');
                 // 
    var context = canvas.getContext("2d");

    setInterval((function (c, i) {
                return function () {
                    draw_anim(c, 10, 10, i);
                };
    })(context, img_obj), 100);
}

So würde ich das Problem angehen. Hoffentlich war das hilfreich. (getestet)

Answer 3

Für alle, die immer noch Probleme damit haben oder die ihre Bilder nicht dynamisch laden oder herausfinden möchten, wie viele Frames sie verwenden müssen;

Lassen Sie das animierte GIF auf der HTML-Seite, auf display:block, visibility:visible und position:relative im CSS eingestellt. Positionieren Sie es dynamisch unter dem Canvas mit einem negativen margin-top/z-index (oder was auch immer Sie verwenden möchten). Stellen Sie dann einen JavaScript-Timer ein, der drawImage wiederholt aufruft, so schnell wie nötig, um das Bild ordnungsgemäß zu aktualisieren.

Wenn das Bild im DOM nicht sichtbar ist, kann die drawImage-Routine keine aufeinanderfolgenden Frames der Animation abrufen. Wenn das Bild absolut positioniert ist, hinkt die Darstellung hinterher.

Answer 4

Nun, wie bereits andere Personen gesagt haben, müssen Sie die Animation in Frames aufteilen. Mein Weg, das Problem anzugehen, ist mehr eine persönliche Vorliebe, aber ich öffne das GIF in GIMP und verwende ein Plugin, um alle Frames, die als separate Ebenen angezeigt werden, in ein Sprite Sheet umzuwandeln. Dann muss ich nur noch den Sprite auf der Leinwand animieren, was viel einfacher ist.

Hier ist der Link zum Plugin :D

Answer 5

Wenn Sie bereits eine Bildrate in Ihr Canvas programmiert haben, könnte es eine gute Strategie sein, das gif als Sequenz von Bildern zu exportieren.

In Photoshop können Sie das gif öffnen (Zeitleiste einschalten) und dann "Datei > Exportieren > Video rendern" auswählen und "Photoshop Bildsequenz" auswählen.

Laden Sie sie alle vor, fügen Sie einen Zähler hinzu und verwenden Sie dann einfach drawImage, um das richtige Bild gemäß dem Zähler zu zeichnen.