Javascript - Animation elem with javaScript

Forum - Javascript - Animation elem with javaScript

giocala88 (Normal User)
Expert

Messaggi: 248
Iscritto: 23/04/2008

Postato alle 14:21
Mercoledì, 10/12/2014

Salve ragazzi, vorrei implementare in JS l'animazione di un immagine che scorre in avanti per 300px e raggiunti i 300px torna indietro fino a 0px. Posto il codice:

Codice sorgente - presumibilmente Delphi

window.onload = function () {
        updateVan(0);
        function updateVan(i) {
        var t = setTimeout(function () {                                                        
        document.getElementById("van").style.marginLeft = i + "px";
        if (i < 300) updateVan(i+1);                            
        },30);
        }
}

Questo codice funziona e sposta di 300px l'immagine da sinistra verso destra. Ora come faccio a farla ritornare indietro, cioè a 0px da destra a sinistra e così via? Grazie

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 16:47
Giovedì, 11/12/2014

Codice sorgente - presumibilmente Delphi

function updateVan(i, direction) {
// ...
 
if (i < 300 && direction == 'F') updateVan(i+1, 'F');  
else if (i >= 300 && direction == 'F') updateVan(i - 1, 'B');
else if (i > 0 && direction == 'B') updateVan(i - 1, 'B');
else if (i <= 0 && direction == 'B') updateVan(i + 1, 'F');

?

Nota comunque che ci sono diverse librerie in Javascript che possono aiutarti a fare questo genere di animazioni (con diversi tipi di interpolazione).

Il mio blog: https://piero.dev