Come animare una sequenza PNG usando jQuery (sia tramite scorrimento o animazione attivata)

Sempre di più vedo un effetto in cui i PNG sono caricati in una serie di DIV (o un div) e poi in sequenza sebbene fotogramma per fotogramma o in base al clic del pulsante o in base allo scorrimento. Ho provato a dare un'occhiata al codice, e capisco che javascript sta facendo il lavoro pesante, ma sono ancora un po 'perso, ci sono tutorial su questa tecnica? esempi?Come animare una sequenza PNG usando jQuery (sia tramite scorrimento o animazione attivata)

esempio di animazione (div multipla) http://atanaiplus.cz/index_en.html:

esempio di animazione (un div): http://www.hyundai-veloster.eu/

esempio di animazione di scorrimento: http://discover.store.sony.com/tablet/#design/ergonomics

fonte

2012-03-12 user379468

si desidera solo per scambiare la attributo src utilizzando un timer setInterval

var myAnim = setInterval(function(){ 
    $(".myImageHolder").attr('src', nextImage); 
}, 42);

Il trucco è come si genera nextImage. Questo dipende in gran parte le convenzioni di denominazione delle immagini, o di quale direzione si desidera l'animazione per l'esecuzione in

Aggiornamento

Oppure utilizzare un plugin

fonte

2012-03-12 15:31:10

sì la cosa su spritely è che la sequenza di immagini è effettivamente una grande immagine, che viene spostata per creare un'animazione. Non penso davvero che funzionerebbe per una sequenza di immagini più ampia e complessa. – user379468

Sì, la dimensione del file sarebbe ENORME. –

beh, probabilmente più piccolo di tutte le singole immagini –

Forse invece di commutazione tra diverse immagini, utilizzare la tecnica di sprite descritta in questa domanda: How to show animated image from PNG image using javascript? [ like gmail ]

fonte

2012-03-12 15:36:15 Zugbo

Non ho ancora il rappresentante per commentare altre risposte, ma in risposta al problema delle dimensioni del file: Se devi caricare tutte le immagini comunque, sei già impegnato a inviare quei dati, raggruppando le immagini in uno sprite che almeno si risparmia sul sovraccarico dell'HTTP. Hai anche il vantaggio di essere in grado di avviare l'animazione non appena l'immagine viene caricata, senza dover controllare tutte le immagini separatamente. – Zugbo

Potrebbe essere vero, ma penso che ci siano altre ragioni per cui non è ottimale. Spostarsi intorno a un'immagine di 10.000 per 10.000 è molto più costoso da eseguire del rendering che attivare la visibilità o scambiare il nome di un'immagine nel div ... – user379468

È necessario pesare la dimensione del file rispetto al numero di richieste HTTP. Se le tue immagini non devono essere completamente transaprent, potresti spitarle in un grande JPEG .... ma se hanno bisogno di essere PNG-24, questo diventerebbe davvero enorme per combinarle tutte insieme. Le richieste HTTP potrebbero valerne la pena. –

Come animare una sequenza PNG usando jQuery (sia tramite scorrimento o animazione attivata)

risposta

Problemi correlati