GIFをparseするjsなライブラリ（４）

　先日、
とある切っ掛けで前回の投稿を見たりしたのですが、
妙なことに気が付きました。
「なぜ、コールバックをプロパティにしたのだろうか」と。

　まぁ、
こういうのも無くはないのでしょうが、
コールバックはparse時にしか意味はないので、
プロパティにするのは実装的に如何なものかと(^_^;)
我ながら何故こういう作りにしてしまったのか、よく覚えてない。

　ともあれ、
個人的に何か気持ち悪いので(^_^;)
コールバックはparse時に渡すように変えました。

　ということで、
サンプルなソースコードの例は以下のように変わります。
何度も変えてスイマセン(^_^;)
GIFファイルを読み込んだ array buffer と
canvas なDOMを渡せばOKです。

function animateGIF(arrayBuffer,canvas) {
    var gif,context,frames,idx,delay,lastTime;

    gif = new Gif();
    gif.parse(arrayBuffer,
        function() { // on parse
            start();
        },
        function(e) { // on error
            alert(e);
        },
        function(e) { // on progress
            console.log('Parsing...' + ((100 * e.loaded / e.total)|0) + '%');
        }
    );

    function start() {
        canvas.width = gif.header.width;
        canvas.height = gif.header.height;
        context = canvas.getContext('2d');
        frames = gif.createFrameImages(context,true); // pre-rendering
        idx = 0;
        delay = 0;
        draw(); // first draw
        if (frames.length > 1) {
            setTimeout(function() { // setTimeoutはあえてやらなくてもよいかも。
                lastTime = performance.now();
                tick(lastTime);
            },0);
        }
    }

    function draw() {
        var frame = frames[idx];
        delay += frame.delay * 10; // 1/100sec to millisec
        context.putImageData(frame.image,frame.left,frame.top);
    }

    function tick(time) {
        var delta = time - lastTime;
        lastTime = time;
        delay -= delta;
        if (delay <= 0) {
            idx = (idx+1) % frames.length;
            draw();
        }
        requestAnimationFrame(tick);
    }
}

　拙作のライブラリを使って、
作ってみたツールはこちらから試せます。
ライブラリのダウンロードも行えます。