javascript w3school Come fermare una gif animata dal loop




jquery v3 3.1 cdn (5)

Stavo avendo lo stesso problema con una gif animata. La soluzione è piuttosto semplice.

  1. Apri la gif animata in Photoshop.

  2. Vai alla scheda Finestra e seleziona la sequenza temporale (se la timeline non è già aperta).

  3. Nella parte inferiore del pannello Timeline, troverai un'opzione, che dice "Forever". Cambia quello in "Once".

  4. Vai su File> Esporta> Esporta per Web e salvalo come GIF.

Questo dovrebbe farlo.

Ho una gif animata in un tag img che ricomincio riscrivendo l'attributo src. La gif è stata creata, però, in loop e voglio solo che venga riprodotta una volta. C'è un modo, con Javascript o jQuery, per fermare una gif animata da giocare più di una volta?


So che sono piuttosto in ritardo qui ma ... c'è ...

Non so se andresti a questa lunghezza ma lasciami condividere un trucco.

Apri GIF in Macromedia Flash 8 (che da allora è deprecato), Esporta GIF come GIF animata. Dovrai scegliere il percorso del file. Successivamente, si riceverà una finestra di dialogo con le impostazioni. In questo, aggiungi il numero di volte in cui desideri che l'animazione si verifichi. Clicca OK. Problema risolto.


In realtà è possibile far smettere una gif dopo una sola iterazione o un numero specifico di iterazioni, vedere un esempio qui sotto (se non è già stato fermato), o in jsfiddle .

Per fare ciò il gif deve essere creato con il numero di iterazioni specificato. Questo può essere fatto usando Screen to Gif , permette di aprire una gif o un gruppo di immagini e modificarle fotogramma per fotogramma.

Questa soluzione consente inoltre di reimpostare l'animazione da imgElem.src = imgElem.src; ma questo non funziona in MS IE / Edge.


Sulla base di questa risposta , è piuttosto costoso, ma funziona. Diciamo che un singolo ciclo richiede 2 secondi. Ad un setTimeout dopo 2 secondi di kick in un setInterval, ciò ripristinerebbe la sorgente di immagini ogni millisecondo:

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

di nuovo, probabilmente solo una dimostrazione di concetto, ma ecco la demo: http://jsfiddle.net/MEaWP/2/


puoi scoprire per quanto tempo il gif prende il ciclo una volta? se è così allora puoi fermare l'immagine in questo modo:

pseudocodice:

wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze

javascript:

var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
    c.getContext('2d').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);

jsfiddle

modifica: ho dimenticato di aggiungere il riferimento alla risposta originale da cui ho preso questo, mi dispiace

Fermare l'animazione GIF a livello di programmazione

quello non affronta il fattore tempo necessario per un solo ciclo

Inoltre, è stato detto che questo approccio è problamatico in alcuni casi (in realtà non funzionava quando lo provavo in Firefox in questo momento ...). quindi ecco alcune alternative:

  1. menzionato da Mark: modifica la gif stessa per evitare il looping. questa è l'opzione migliore se puoi. ma ho riscontrato casi in cui non era un'opzione (come la generazione automatica di immagini da parte di terzi)

  2. invece di eseguire il rendering dell'immagine statica con tela, mantenere una versione dell'immagine statica e passare a interrompere il ciclo . questo probabilmente ha la maggior parte dei problemi come la cosa di tela





jquery