Javascript

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



Can You Control Gif Animation With Javascript



解決：

あなたは使用することができます libgif 図書館。

gifを開始/停止し、gifがどのフレームにあるかを制御できます。



$$（ 'img'）。each（function（img_tag）{if（/.* 。gif / .test（img_tag.src））{var rub = new SuperGif（{gif：img_tag}）; rub.load（ function（）{console.log（ 'ああ、gifが読み込まれました'）;}）;}}）;
（ほとんどのコードは彼らの例から直接取られています）
  
私が使う x-gif かなりクールでセットアップも簡単です。
 
 
 
Githubから：
 
  
以下を属性として追加できる場所：
 
     
  • 再生モード：
       
    • speed = '1.0'（デフォルトモード）は、速度に属性の値を掛けます。
      •  
    • syncは、再生を外部オブジェクトに延期します。
      •  
    • bpm = '120'は、GIFを特定の1分あたりの拍数に同期します。
      •  
    •  
  • オプション：
     
     
     
       
    • 停止すると、GIFがアニメーション化されなくなります。
      •  
    • fillを使用すると、GIFが拡張されてコンテナがカバーされます。
      •  
    • n-times = '3.0'（速度モードのみ）は、設定された回数後に再生を停止します（stopped属性を追加することにより）。
      •  
    • スナップ（同期モードとbpmモードのみ）長いGIFを複数のビートに同期させるのではなく、1つだけに収まるように強制します。
      •  
    • ピンポンはGIFを前面から背面に再生し、次に背面から前面に再生します。
      •  
    •  
  • デバッグ：
       
    • debugは、GifExploderからのデバッグ出力をオンにします。
      •  
    • 爆発は再生を停止し、各フレームを並べてレンダリングします。
      •  
    •  
  
gifをスプライトシートに変換しても問題がない場合は、次のように行うことができます（ImageMagickを使用）。
 
モンタージュanimation.gif-coalesce -tile x1 -geometry + 0 + 0-backgroundなし-quality100 spritesheet.png
新しい画像のサイズが小さくなる可能性もあります。
 
スプライトシートを作成したら、CSSアニメーションを使用します。ここでは、フレーム時間が固定されたアニメーションが使用されます。
 
var el = document.getElementById（ 'anim'）; function play（）{el.style.animationPlayState = '実行中'; }関数pause（）{el.style.animationPlayState = '一時停止'; } function reset（）{el.style.animation = 'none'; el.offsetHeight; / *リフローをトリガーして変更をすぐに適用します* / el.style.animation = null; } function stop（）{reset（）;一時停止（）; }
#anim {background-image：url（ 'https://i.stack.imgur.com/J5drY.png'）;幅：250px;高さ：188px;アニメーション：アニメーション1.0sステップ（10）無限; } @keyframes anim {100％{background-position：-2500px; }}
再生一時停止リセット停止
アニメーションを自動的に開始しないようにする場合は、次を追加します。最後まで一時停止アニメーションルール。