2013-04-22 25 views
7

アニメgifの再生が可能かどうか疑問に思って、gifがアニメーションの終わりに達したらjqueryを通してイベントを起動します。それを実行すると、キューの先頭にループバックし、gifとイベントを再び再生します。JqueryでアニメーションGIFがいつ終了するのですか?

あなたが私のjfiddleを見れば、私は少年がタイピングしている人を少し作った。彼が探してアイデアを得るとき、私はその "思考" divを他のものに変えたいと思っています。私は彼の頭の上にあるその言葉が同期していて、頭が上がったときに右に変わることを望んでいる。

http://jsfiddle.net/mMVhK/1/

<div id="thought"> 
    Amazing Idea 
</div> 

<div id="firstgif"> 
    <img src="http://i.imgur.com/pcc4DP5.gif"/> 
</div> 
+0

あなたのgifパスがフィドルで正しく行われていません...あなたはループせずに何を意味しています – bipen

答えて

5

これに対する私の答えは同様のstackoverflowの質問にthis answerthis oneに似ています。

設定したフレーム数とループなしのGIFをお持ちの場合、JavaScriptを使用してsetTimeoutにイベントをトリガーすることができます。これにより、GIFのレンダリングが毎回javascriptの実行と同じ速度で実行されるかどうかを推測するゲームをプレイしているため、同期が外れる可能性が非常に高くなります。

より安全なオプションは、sprite mapを使ってアニメーションをシミュレートする方法で、私がリンクした別の答えです。これは、javascriptを使用してエレメント内の画像の背景位置を変更することによって実現されます。この方法では、アニメーションのアニメーションの仕方、JavaScriptのイベントに対するより優れたコントロール、およびJavaScriptの実行速度に結びついたより良いタイミングについて、より多くのコントロールができます。アニメーションのフレームにのみ表示されます。

私は例はありませんが、これについてまともな頭出しをしたり、他の質問がある場合は、私は喜んでお手伝いします。

Useful information regarding CSS Sprites

+0

見てください?どのようにループができませんか? – vsync

+0

gifを作成するときには、通常、アニメーションのループ/リピートを制御するオプションがあります。私が 'setTimeout'を使って提案したものについては、特定の場所でアニメーションを停止する必要があるため、画像にループがない場合は最も簡単です。 (他の選択肢がない場合は、タイムアウトが発生すると、静的な終了フレームのアニメーションGIFを切り替えることです) – Turnerj

関連する問題