Newsgroup: it.comp.lang.javascript
Titolo: javascript e gif animate

recentemente stavo lavorando con delle gif animate e mi sono reso conto di 
quanto sia limitativo usare il loro "motore" di animazione interno, perché 
sebbene abbia impostato tempi di attesa tra un frame e l'altro del minimo 
possibile, comunque la velocità di riproduzione è sempre molto, troppo lenta 
e ciò inficia sulla resa della fluidità dell'animazione. Allora mi è venuta 
un'idea. Perché non usare javascript sui singoli frame? Ossia impostare una 
sequenza di frame con un tempo che gestisco io, ogni frame ovviamente è una 
immagine gif.
Si può fare giusto? Con Setimeout...
Poi vi volevo chiedere se conoscete qualche softwarino per fare il tutto 
senza stare ogni volta a scrivere del codice javascript. Esiste? In pratica 
un programmino che ti fa inserire le tue immagini e lui ti produce il codice 
per metterle in sequenza alla velocità desiderata.
ciao Summonix 

 ogni frame ovviamente è una immagine gif.
Mi correggo...non necessariamente gif, o meglio, non solo gif ma anche jpg 
se possibile.
ciao Summonix 

Summonix ha scritto:

Non che ci vogliano millemila linee di codice eh!
Un po' di eccezionale pappa pronta:
function AnimazioneCiclica()
{
   this.indice_frame = 0;
   this.numero_frames = 50; // l'animazione consta di 50 frames
   this.timer = null;
   this.intervallo = 100; // millisecondi
}
AnimazioneCiclica.prototype.avvia = function()
{
   if (this.timer)
   {
      // Gia' avviato
      return;
   }
   // closure
   var me = this;
   this.timer = setInterval(function()
   {
      me._frameSeguente();
   }, this.intervallo);
};
AnimazioneCiclica.prototype.interrompi = function()
{
   if (!this.timer)
   {
      // Gia' fermo
      return;
   }
   clearInterval(this.timer);
   this.timer = null;
};
AnimazioneCiclica.prototype._frameSeguente = function()
{
   // Imposta l'immagine, ad esempio:
   document.getElementById('frame_animato').src = 'path/to/image/' +
this.indice_frame + '.jpg';
   // Incrementa l'indice del frame corrente
   this.indice_frame = ++this.indice_frame % this.numero_frames;
};
// Crea e avvia un'animazione
new AnimazioneCiclica().avvia();
-- 
Piu' che ecoballe c'erano tante balle e basta.

 new AnimazioneCiclica().avvia();
Questa poi... neanche la commento, perché non so da dove partire :-)
Osservazioni:
Adesso capisci perché cercavo un programino che lo facesse automaticamente? 
.-)
Il fatto è che dovrei studiare un bel po' di proigrammazione ma adesso non 
ho tempo. comunque con quel pochissimo che so sono riuscito a farla, anche 
se non con un codice così flessibile e funzionale come il tuo. Cioè, nel mio 
caso ogni volta dovrei scrivermi un po' di cose, soprattutto per quanto 
riguarda i nomi di file immagine e qualche aggiustamento in base al numero 
di frame.
Comunque ecco di seguito il codicino:
<script type="text/javascript">
var immagini = new Array(
"test3_frame0001.jpg",
"test3_frame0002.jpg",
"test3_frame0003.jpg",
"test3_frame0004.jpg",
// ...altre immagini
//... "test3_frame0017.jpg"
);
var cont = 0;
function anim() {
var animazione = document.getElementById("spazioAnim");
animazione.src = immagini[cont];
cont++;
var controllo = setTimeout ("anim()",15);
if (cont >=17){
clearTimeout(controllo);
cont = 0;
}
}
e sotto il body ho messo uno spazio immagine:
<img id="spazioAnim" src="start.jpg">
Insomma, l'ho testato e funziona a meraviglia, finalmente vedo un'animazione 
fluidissima, come cercavo.
Potresti dirmi gentilmente (prima di manarmi a cac... dopo tutte le mie 
richieste!) se il mio codice ha degli sconvenienti?
ciao Summonix 

 Questa poi... neanche la commento, perché non so da dove partire :-)
e' una chiamata concatenata, equivale a:
var animazione = new AnimazioneCiclica();
animazione.avvia();

direi che svolge egregiamente il compito da te richiesto, tuttavia:
- e' procedurale, non ad oggetti
- non produce un'animazione ciclica
-- 
Local candidates only, no relocation

 funzione.
[cut]
Per il momento gli ho dato una lettura rapida perché non sono per me 
argomenti di facile comprensione, quindi ho preferito dare uno sguardo 
d'insieme.
Adesso me lo prendo e mi studio tutta la tua spiegazione didattica, per la 
quale ti ringrazio moltissimo, e spero di capirci qualcosa. Non sai la 
voglia che ho di impare, ma avendo da seguire il web design mi rimane tempo 
praticamente nullo per approfondire un po' la programmazione.
Non so quando, se necessario tornerò a chiederti.
ciao a infinite grazie
Summonix 

 "punta" alla finestra (window).
giusto per precisare, le funzioni "globali" sono anch'esse metodi,
dell'oggetto implicito (window), per questo this al loro interno
restituisce [object window]
