Kontrolliere GIF-Animation mit JS. Spielen, stoppen, rückwärts spielen

Question

Was ich versuche zu erreichen, ist interaktives animiertes Logo. Standardmäßig befindet es sich in Bild 1. Wenn es sich bewegt, wird es vorwärts abgespielt und stoppt beim letzten Bild. Auf mouseleave spielt es vom letzten Frame zum ersten (rückwärts) und stoppt beim ersten Frame. Wenn mouselave während Vorwärtsanimation -> aktuelles Bild erhalten und rückwärts spielen.

Ich habe versucht, dies mit Leinwand und Sprites zu tun, aber es ist sehr herausfordernd. Tatsächlich verstehe ich es nicht wirklich. Ich habe versucht this plugin, aber es ist die Möglichkeiten sind begrenzt.

Also frage ich mich, ob ich es mit GIF tun kann? Vielleicht könnte ich den aktuellen Animationsframe bekommen und Gif rückwärts von diesem Frame abspielen?

Answer 1

Ja, können Sie gif mit einigen js lib steuern, wie folgt aus: 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 (mit 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()); 
}) 

`` `