web-dev-qa-db-ja.com

HTML5キャンバスのアニメーションGIF

HTML5では、動作するキャンバスにアニメーションGIFを簡単に描画できます（複雑なコードはあまり必要ありません）（drawImageでは最初のフレームのみがキャンバスに表示されます）。

html5canvasgifanimated-gif
43
julio

あなたが探していると思います http://slbkbs.org/jsgif

残念ながら、DOMはGIFの個々のフレームを公開しないため、これはGIFを（XMLHttpRequestを使用して）ダウンロードし、解析し、<canvas>。

16
rodrigob

GIFファイルの自動キャンバスアニメーションが利用できない場合は、スプライトシートを使用してみることもできますが、実際にはもう少しコードが必要になります。

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

これが私が問題に取り組む方法です。これが役に立てば幸いです。 （テスト済み）

15
Adrian Castravete

さて、他の人がすでに言ったように、あなたはpeアニメーションをフレームに分割しなければなりません。私の問題への取り組み方は個人的な好みですが、GIFをGIMPで開き、プラグインを使用して個々のレイヤーとして表示されるすべてのフレームをSpriteシートに変換します。次に、キャンバス内のSpriteをアニメーション化するだけで、はるかに簡単になります。

プラグインの リンク は次のとおりです。

1
Rototu Tank

まだこれで問題がある人、または画像を動的にロードしたくない、または使用する必要があるフレーム数を知りたくない人のために。

HTMLページにアニメーションGIFを残し、CSSでdisplay：block、visibility：visible、position：relativeに設定します。負のmargin-top/z-index（またはあなたが持っているもの）でキャンバスの下に動的に配置します。次に、イメージを適切に更新するために必要な速度でdrawImageを繰り返し呼び出すJavaScriptタイマーを設定します。

画像がDOMに表示されていない場合、drawImageルーチンはアニメーションの後続のフレームを取得できません。画像がキャンバスの下に絶対に配置されている場合、レンダリングが遅れます。

1
Ayelis