web-dev-qa-db-ja.com

JavascriptでGIFアニメーションを制御できますか？

Javascriptを使用して、GIF画像のどのフレームを表示するかを制御したり、アニメーションを停止したりできますか。 GIFに複数のフレームをロードし、そのうちの1つだけを表示できるようにしたいのです。

たくさんの別々の画像でできることはわかっていますが、GIFでやりたいことができるなら、心配するファイルは1つだけです。

javascriptcssanimationgifanimated-gif
58
Logan

CSSスプライト を使用して、単一の画像でそれを行うことができます。

9
N 1.1

libgif ライブラリを使用できます。

これにより、gifを開始/停止し、gifをオンにするフレームを制御できます。

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

（ほとんどのコードは例から直接取られています）

55
Charlotte

私は x-gif を使用します。かなりクールでセットアップが簡単です。

Github から：

<x-gif src="probably_cats.gif"></x-gif>

以下を属性として追加できる場所：

  • 再生モード：
    • speed="1.0"（デフォルトモード）速度に属性の値を掛けます。
    • syncは、外部オブジェクトへの再生を延期します。
    • bpm="120" GIFを特定の1分あたりの拍数に同期します。

  • オプション：

    • stoppedは、GIFのアニメーション化を防ぎます。

    • fillは、GIFを展開してそのコンテナをカバーします。

    • n-times="3.0"（速度モードのみ）は、設定された回数の後に（停止属性を追加することにより）再生を停止します。
    • snap（同期およびbpmモードのみ）長いGIFを複数のビートに同期させる代わりに、それらを1つのビートのみに収めるようにします。
    • ping-pongは、GIFを前面から背面へ、次に背面から前面へ再生します。
  • デバッグ：
    • debugは、Gif Exploderからのデバッグ出力をオンにします。
    • explodedは再生を停止し、各フレームを並べてレンダリングします。
21
Oscar Nevarez

GifをSpriteシートに変換することに問題がない場合は、次の方法で実行できます（ImageMagickを使用）。

montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png

新しい画像のサイズが小さくなる可能性さえあります。

スプライトシートを作成したら、CSSアニメーションを使用します。ここでは、固定フレーム時間のアニメーションが使用されます。

var el = document.getElementById('anim');
function play() {
  el.style.animationPlayState = 'running';
}
function pause() {
  el.style.animationPlayState = 'paused';
}
function reset() {
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow to apply the change immediately */
  el.style.animation = null;
}
function stop() {
  reset();
  pause();
}
#anim {
  background-image: url('https://i.stack.imgur.com/J5drY.png');
  width: 250px;
  height: 188px;
  animation: anim 1.0s steps(10) infinite;
}
@keyframes anim {
  100% { background-position: -2500px; }
}
<div id="anim" title="Animated Bat by Calciumtrice"></div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="reset()">Reset</button>
<button onclick="stop()">Stop</button>

アニメーションを自動的に開始しない場合は、pausedルールの最後にanimationを追加します。

8
user