web-dev-qa-db-fra.com

GIF animé dans un canevas HTML5

En HTML5, comment puis-je dessiner facilement (pas trop de code complexe s'il vous plaît) un GIF animé dans un canevas qui fonctionne (avec drawImage seule la première image est montrée dans le canevas)

html5canvasgifanimated-gif
43
julio

Je crois que vous cherchez http://slbkbs.org/jsgif

Malheureusement, le DOM n'expose pas les cadres individuels d'un GIF, donc cela se fait en téléchargeant le GIF (avec XMLHttpRequest), en l'analysant et en le dessinant sur un <canvas>.

16
rodrigob

Eh bien, si l'animation de canevas automatisée des fichiers gif n'est pas disponible, vous pouvez essayer d'utiliser des feuilles Sprite, mais cela nécessiterait en effet un peu plus de code.

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

var img = new Image();
img.onload = function () { // Triggered when image has finished loading.
    img_obj.source = img;  // we set the image source for our object.
}
img.src = 'img/filename.png'; // contains an image of size 256x16
                              // with 16 frames of size 16x16

function draw_anim(context, x, y, iobj) { // context is the canvas 2d context.
    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;
                   // incrementing the current frame and assuring animation loop
}

function on_body_load() { // <body onload='on_body_load()'>...
    var canvas = document.getElementById('canvasElement');
                 // <canvas id='canvasElement' width='320' height='200'/>
    var context = canvas.getContext("2d");

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

C'est ainsi que je réglerais le problème. J'espère que cela vous a été utile. (testé)

15
Adrian Castravete

Eh bien, comme d'autres l'ont déjà dit, vous devez diviser l'animation pe en images. Ma façon d'aborder le problème est plus une préférence personnelle, mais j'ouvre le GIF dans GIMP et en utilisant un plugin, je convertis tous les cadres qui sont affichés en tant que couches individuelles dans une feuille Sprite. Ensuite, je n'ai qu'à animer le Sprite dans la toile, ce qui est beaucoup plus facile.

Voici le lien pour le plugin: D

1
Rototu Tank

Pour tous ceux qui ont encore des problèmes avec cela, ou ceux qui ne veulent pas charger leurs images dynamiquement ou comprendre combien de cadres ils doivent utiliser;

Laissez le GIF animé sur la page HTML, réglé pour afficher: bloc, visibilité: visible et position: relative dans le CSS. Positionnez-le dynamiquement sous la toile avec un marge-top/z-index négatif (ou ce que vous avez). Ensuite, définissez une minuterie JavaScript qui appelle drawImage à plusieurs reprises, aussi vite que vous le souhaitez afin de rafraîchir l'image correctement.

Si l'image n'est pas visible dans le DOM, la routine drawImage ne peut pas acquérir les images suivantes de l'animation. Si l'image est absolument positionnée sous le canevas, le rendu est en retard.

1
Ayelis