Animation GIF de contrôle avec JS. Jouez, arrêtez, jouez en arrière

Question

Ce que j'essaie de réaliser est un logo animé interactif. Par défaut, il est sur l'image 1. Lorsque survolé, il joue en avant et s'arrête à la dernière image. Sur mouseleave, il joue de la dernière image à la première (en arrière) et s'arrête à la première image. Si le mouseleave pendant l'animation vers l'avant -> obtenir l'image courante et jouer en arrière.

J'ai essayé de le faire en utilisant canvas et sprites mais c'est très difficile. En fait, je ne le comprends pas vraiment. J'ai essayé this plugin, mais ses possibilités sont limitées. Donc, je me demande si je peux le faire en utilisant GIF? Peut-être que je pourrais obtenir le cadre d'animation en cours et jouer en arrière à partir de ce cadre?

Answer 1

Oui, vous pouvez contrôler gif avec quelques lib js, comme ceci: https://github.com/buzzfeed/libgif-js

html:

`` `

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

`` `