先日、
とある切っ掛けで前回の投稿を見たりしたのですが、
妙なことに気が付きました。
「なぜ、コールバックをプロパティにしたのだろうか」と。
まぁ、
こういうのも無くはないのでしょうが、
コールバックは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);
}
}
拙作のライブラリを使って、
作ってみたツールはこちらから試せます。
ライブラリのダウンロードも行えます。