HTML5になって俄然面白くなってきたのがアニメーションGIFではないかと思います。バイナリとして読み込むことで、単純な再生だけでなく再生を変化させたり、動画から新しいアニメーションGIFを作ってしまったりできます。 そのベースとして使えそうなライブラリがgifkenです。アニメーションGIFの解析はもちろん、作成までサポートしたライブラリです。

gifkenの使い方

また、コードで新しいアニメーションGIFの作成ができます。

<div id="content"></div>
<script type="text/javascript">
window.onload = function () {
    var newgif = new gifken.Gif();
    newgif.width = 100;
    newgif.height = 100;
    newgif.globalColorTable = gifken.Color.createColorTable([
        new gifken.Color(0, 0, 0),
		  :
        new gifken.Color(255, 255, 255)
    ]);
    newgif.frames = [gifken.Frame.init(newgif)];
    for (var i = 0; i < newgif.frames[0].pixelData.length; ++i) {
        newgif.frames[0].pixelData[i] = i % 11;
    }
    var newimg = new Image();

    // createObjectURL pattern
    // var blob = newgif.writeToBlob();
    // newimg.src = URL.createObjectURL(blob);

    // data-URL pattern
    newimg.src = gifken.Gif.writeToDataUrl(newgif);

    document.getElementById("content").appendChild(newimg);
};
</script>

カラーテーブルを作ったり、フレームを追加し、最後に画像として流し込んでいます。その場でアニメーションGIFが作れてしまうのは面白いですね。

gifkenはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

gifken by aaharu aaharu/gifken