你可以用Javascript控制GIF動畫嗎？

是否有可能使用JavaScript來控制圖像的哪個幀正在顯示和/或停止動畫。我想能夠加載一個GIF幾幀，只顯示其中之一。你可以用Javascript控制GIF動畫嗎？

我知道我可以用很多單獨的圖片來做，但如果我可以做我想要的GIF，它只會是一個需要擔心的文件。

2010-03-05 Logan

你也可以做一個大的圖像與精靈，只顯示精確的精靈通過剪輯圖像 – MBO 2010-03-05 07:40:23

同意@MBO，與精靈很簡單，檢查相關的問題：http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail – CMS 2010-03-05 07:45:31

使用沒有聲音的視頻。就像9gag – atilkan 2016-09-08 13:25:19

您可以使用單個圖像使用CSS sprites來做到這一點。

來源

2010-03-05 07:41:40

這是真的，只要人們想要做的是在2D平面周圍分割圖像的不同變化，而不是將其分割爲獨立的幀。 – Pointy 2010-03-05 08:11:41

您可以使用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>

（大部分代碼是直接從他們的榜樣拍攝）

來源

2013-05-15 18:11:48 Charlotte

此代碼似乎不適用於我。它用'sup1.load（）'來播放gif，然後當gif完成時，它會用'sup1.move_to（frame）'進入第一幀。我也嘗試過使用'pause（）'，但它似乎並沒有凍結第一幀上的gif。我編輯了原始代碼，以便在第一幀停止，但是有沒有辦法在第一幀暫停gif而不編輯代碼？ – 2014-12-29 02:42:18

@LeoCHan我已經將示例代碼更新到了最新的api，現在就試試吧 – Charlotte 2015-04-13 19:08:19

這個答案比接受的問題好得多。 – Wortex17 2015-05-03 12:15:37

我用x-gif它很酷，易於安裝。

從Github：

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

，您可以添加以下的屬性：

播放模式：
- speed="1.0"（默認模式）通過的值乘以速度屬性;
- sync延遲迴放到外部對象;
- bpm="120"將GIF同步到給定的每分鐘節拍;
選項：
- stopped防止GIF動畫從;
- fill導致GIF擴展到覆蓋其容器;
- n-times="3.0"（僅速度模式）在設定的次數後停止播放（通過添加停止的屬性）;
- snap（同步&僅適用於bpm模式）而不是允許更長的GIF同步到多個節拍，強制它們只適合一個;
- ping-pong從前到後播放GIF，然後回到前端;
調試：
- debug接通從所述的Gif爆器輸出調試;
- exploded停止播放，並將每個幀並排顯示。

來源

2014-12-03 15:02:46 insan3

從他們的[Github]（https://github.com/geelen/x-gif）頁面可以像這樣工作：<你可以添加幾個屬性到這個標籤播放模式，選項和調試。我試圖編輯你的答案，提供[總結]（http://stackoverflow.com/review/suggested-edits/9071628），但它被拒絕了，如果你有時間，你可以自己編輯它。 – Armfoot 2015-08-06 19:48:22

謝謝@Armfoot – insan3 2015-08-07 18:12:53

不，謝謝你insan3！ :) – Armfoot 2015-08-07 19:25:59

如果你和你的GIF轉換爲精靈表OK，你可以做這樣（使用ImageMagick）：

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

它甚至可能是新的形象會尺寸較小。

一旦你有一個精靈表，使用CSS動畫。如果你希望動畫不會自動啓動，加paused到animation統治結束

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>

：具有固定幀時間的動畫在這裏使用。

來源

2017-07-11 16:46:27 user

這是一個真棒和簡單的方法來解決這個問題，gratz！ – rafaelcastrocouto 2017-09-01 17:25:56

你可以用Javascript控制GIF動畫嗎？

回答

相關問題