41

src 属性を書き換えて開始する img タグにアニメーション GIF があります。ただし、gif はループするように作成されており、一度だけ再生したいのです。Javascript または jQuery を使用して、アニメーション GIF が複数回再生されないようにする方法はありますか?

4

7 に答える 7

9

gif が 1 回ループするのにかかる時間を調べることができますか? その場合は、次のように画像を停止できます。

疑似コード:

wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze

JavaScript:

var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
    c.getContext('2d').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);

jsfiddle

編集： これを元にした元の回答への参照を追加するのを忘れました、ごめんなさい

プログラムによる GIF アニメーションの停止

その1つは、1つのループだけに必要な時間要素に対処していません

また、このアプローチは特定の場合に問題があることが言及されています (現在、Firefox で試してみると、実際には機能しませんでした...)。したがって、ここにいくつかの代替手段があります：

  1. マークによる言及: ループを避けるために gif 自体を編集します。可能であれば、これが最良のオプションです。しかし、それがオプションではない場合に遭遇しました（サードパーティによる画像の自動生成など）

  2. キャンバスで静的画像をレンダリングする代わりに、静的画像バージョンを保持し、ループを停止するように切り替えます。これはおそらくキャンバスの問題としてほとんどの問題を抱えています

于 2013-10-04T00:22:43.450 に答える
5

実際には、1回の反復または特定の反復回数の後にgifを停止することができます。以下の例（まだ停止していない場合）またはjsfiddleを参照してください。

2 回の反復後に停止する gif

これを行うには、反復回数を指定して gif を作成する必要があります。これは、 Screen to Gifを使用して実行できます。これにより、gif または画像の束を開いて、フレームごとに編集できます。

このソリューションでは、アニメーションをリセットすることもできますimgElem.src = imgElem.src;が、これは MS IE/Edge では機能しません。

于 2016-04-03T00:12:16.623 に答える
4

この回答に基づいて、それはちょっと高価ですが、うまくいきます。1 回のループに 2 秒かかるとします。setInterval の 2 秒後に setTimeout が発生すると、ミリ秒ごとにイメージ ソースがリセットされます。

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

繰り返しますが、おそらく単なる概念実証ですが、ここにデモがあります: http://jsfiddle.net/MEaWP/2/

于 2013-10-04T01:18:54.617 に答える