JSでGIFアニメーションを制御します。再生、停止、逆再生

Question

私が達成しようとしているのはインタラクティブなアニメーションのロゴです。デフォルトではフレーム1にあります。ホバリングされると、前のフレームで再生され、最後のフレームで停止します。 mouseleaveでは、最後のフレームから最初（後方）に再生され、最初のフレームで停止します。前方アニメーション中にマウスを離した場合 - >現在のフレームを取得し、後方に再生します。

私はキャンバスとスプライトを使用してこれを実行しようとしましたが、それは非常に困難です。実際に私はそれを本当に理解していません。私はthis pluginを試しましたが、その可能性は限られています。

私はGIFを使用することができますか？おそらく、私は現在のアニメーションフレームを取得し、そのフレームからGIFを逆方向に再生できますか？

Answer 1

はい、あなたはこのように、いくつかのJS libにして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> 

` ``

のjavascript：https://github.com/buzzfeed/libgif-js

HTML jQuery）：

`` `

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()); 
}) 

`` `