Javascript 用JS控制GIF动画。玩，停，向后玩

我试图实现的是交互式动画徽标。默认情况下，它位于第1帧上。悬停时，它向前播放并在最后一帧停止。在mouseleave上，它从最后一帧播放到第一帧（向后），并在第一帧停止。如果在正向动画中鼠标移动->获取当前帧并向后播放

我试着用画布和精灵来做这件事，但这很有挑战性。事实上，我真的不明白。我试过了，但可能性有限

---

所以我想知道我是否可以用GIF来做？也许我可以得到当前动画帧并从该帧向后播放gif

是的，您可以使用一些js库控制gif，如下所示：

html: ```

---

```

这在GIF中是不可能的。精灵是最好的方法。GIF只有两种状态：播放或不播放。无法通过编程暂停/反转GIF。可能重复“虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。”

    <div id="controller-bar">
      <button id="backward" href="#">|< Step back </button>&nbsp;&nbsp;
      <button id="play" href="#"> Play | Pause </button>&nbsp;&nbsp;
      <button id="forward" href="#"> Step forward >|</button>
    </div>

var gif = new SuperGif({
  gif: document.getElementById('example'),
  loop_mode: 'auto',
  auto_play: true,
  draw_while_loading: false,
  show_progress_bar: true,
  progressbar_height: 10,
  progressbar_foreground_color: 'rgba(0, 255, 4, 0.1)',
  progressbar_background_color: 'rgba(255,255,255,0.8)'

});


gif.load(function(){
  document.getElementById("controller-bar").style.visibility = 'visible';
  loaded = true;
  console.log('loaded');
});


$('button#backward').click(function(){
  console.log('current: ', gif.get_current_frame());
  var total_frames = gif.get_length();
  gif.pause();
  if(gif.get_current_frame() == 0) {
    gif.move_to(total_frames-1);
  } else {
    gif.move_relative(-1);
  }
  console.log('next: ', gif.get_current_frame());
})


$('button#play').click(function(){
  console.log('iam play');
  if(gif.get_playing()){
    gif.pause();
  } else {
    gif.play();
  }
})

$('button#forward').click(function(){
  console.log('current: ', gif.get_current_frame());
  gif.pause();
  gif.move_relative(1);
  console.log('next: ', gif.get_current_frame());
})