
用 JavaScript 控制 GIF 動畫:可能嗎?
透過 JavaScript 操作 GIF 可以更好地控制動畫,並透過減少檔案計數。以下是實現此目的的方法:
解決方案:
libgif 庫提供了控制 GIF 所需的功能動畫。
實作:
-
包含libgif.js 腳本:
1 | <script type= "text/javascript" src= "./libgif.js" ></script>
|
登入後複製
-
1 2 | <img src= "./example1_preview.gif" rel:animated_src= "./example1.gif"
width= "360" height= "360" rel:auto_play= "1" rel:rubbable= "1" />
|
登入後複製
-
1 2 3 4 5 6 7 8 | $$( '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' );
});
}
});
|
登入後複製
實例化並載入SuperGif:
此程式碼使用libgif停止動畫並顯示特定影格。提供的範例示範了 GIF 的載入以及其完成情況的控制台日誌記錄。
以上是JavaScript 可以控制 GIF 動畫嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!