アニメーションGIFを制御してみる

アニメーションGIFを1枚ずつ制御できるか調べていたところ、

↓こちらのサイトを見つけました。

code.i-harness.com

↓ここのライブラリを使えば、Javascript で制御できるようだ。

github.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="./libgif.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>
            Example gif
        </title>
    </head>

    <body>
        <center>
            <h1>Example with controls and no auto-play</h1>
            <img id="example1" src="./example_gifs/rub_test_preview.jpg" rel:animated_src="./example_gifs/rub_test.gif" rel:auto_play="0" width="100" height="100" />
            <br>
            <script type="text/javascript">
                var sup1 = new SuperGif({ gif: document.getElementById('example1') } );
                sup1.load();
            </script>
            <a href="javascript:;" onmousedown="sup1.pause(); return false;">Pause</a> |
            <a href="javascript:;" onmousedown="sup1.play(); return false;">Play</a> |
            <a href="javascript:;" onmousedown="sup1.move_to(0); return false;">Restart</a> |
            <a href="javascript:;" onmousedown="sup1.move_relative(1); return false;">Step forward</a> |
            <a href="javascript:;" onmousedown="sup1.move_relative(-1); return false;">Step back</a>

        </center>

    </body>

</html>

しかし、width と height のサイズ指定の部分が効いていないかもしれない。

追記

max_width のプロパティを設定すると、サイズが変更できた。

        <script type="text/javascript">
            var sup1 = new SuperGif({ gif: document.getElementById('example1'),max_width:window.innerWidth } );
            sup1.load();
        </script>

ブラウザの横幅などを設定してあげるとよいかもしれない。

max_width:window.innerWidth

・アニメーションGIFの作り方

image-magick.com