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

"Summonix" <SPAM (AT) SPAM (DOT) com> ha scritto

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:

"Summonix" <SPAM (AT) SPAM (DOT) com> ha scritto
ogni frame ovviamente è una immagine gif.

Mi correggo...non necessariamente gif, o meglio, non solo gif ma anche jpg
se possibile.

ciao Summonix

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.

"mastro delphine" <it.emeraldion (AT) claudio (DOT) REVERSE> ha scritto

Non che ci vogliano millemila linee di codice eh!

Eh, no, ma io per scrivere due righe di codice in javascript ho bisogno di
un paio d'ore .-)

Un po' di eccezionale pappa pronta:

GNAM, GNAM!

function AnimazioneCiclica()
{
this.indice_frame = 0;
this.numero_frames = 50; // l'animazione consta di 50 frames
this.timer = null;
this.intervallo = 100; // millisecondi
}

Ma this cosa significa qui? Io conosco soltanto il this che si passa da un
oggetto del DOM ad una funzione per fare riferimento a quell'oggetto. Qui
che significato ha?

AnimazioneCiclica.prototype.avvia = function()

Ehm... e questa roba che è? :-)
Non conosco proprio la sintassi. Il nome della funzione? e tutta quella roba
a sinistra del segno uguale separata da punti?
Boh, io richiamo le funzioni con il nome di funzione tipo:
onMouseOver="rollami(this)"; e la funzione rollami sarà qualcosa del tipo:
function rollami(pulsante){
....
}
Sono iNiorantissimo, mi spiegheresti gentilmente la riga sopra?

[cut]

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;
};

La prima parte della funzione l'ho capita, cioè la costruzione del path ma
quella sotto sull'incremento de frame, è un po' dura...
A parte che c'è sempre quel this che non so cosa sia, oltre alla solita
sintassi di introduzione alla funzione che non comprendo proprio, come ho
scritto sopra. Ho visto che usi il modulo, ma non capisco il funzionamento:
non bastava aumetarlo di 1 tipo indice_frame++ ?

// Crea e avvia un'animazione
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

Summonix <SPAM (AT) SPAM (DOT) com> wrote:

function AnimazioneCiclica()
{
this.indice_frame = 0;
this.numero_frames = 50; // l'animazione consta di 50 frames
this.timer = null;
this.intervallo = 100; // millisecondi
}


Ma this cosa significa qui? Io conosco soltanto il this che si passa da un
oggetto del DOM ad una funzione per fare riferimento a quell'oggetto. Qui
che significato ha?

this e' un riferimento all'oggetto nel cui contesto viene eseguita una
funzione.

Per dirla semplice, quando tu invochi un metodo di un oggetto, stai
eseguendo una funzione come le altre, con l'eccezione che la variabile
this fa riferimento all'oggetto.

Se la funzione e' un metodo, this "punta" all'oggetto, altrimenti
"punta" alla finestra (window).

prova tu stesso:

function ciao()
{
alert(this);
}

var oggetto = {};
oggetto.ciao = ciao;

ciao(); // => [object window]
oggetto.ciao(); // => [object Object]

Tu puoi passare "this" come parametro di una funzione nel gestore di
evento onclick (o simili) del tag HTML perche' quel codice viene
eseguito nel contesto del metodo omonimo dell'oggetto DOM.

AnimazioneCiclica.prototype.avvia = function()

Ehm... e questa roba che è? :-)

in Javascript non esistono "classi" come in Java,

public class Foo
{
public Foo() {} // Costruttore
public void avvia() {}
public void interrompi() {}
}

gli oggetti vengono costruiti con... funzioni ordinarie, premettendo la
parola chiave "new":

function una_funzione_qualsiasi()
{
}
var oggetto = new una_funzione_qualsiasi();
alert(typeof oggetto); // => object

Come definisci i metodi degli oggetti?

Assegnando delle funzioni come membri dell'oggetto stai creando un
metodo per quella specifica istanza:

oggetto.ciao = ciao;
oggetto.ciao();

Tuttavia nuove istanze della tua "classe" non dispongono del metodo:

var altro_oggetto = new una_funzione_qualsiasi();
alert(altro_oggetto.ciao); // => undefined

come risolvere allora? Assegnare ogni volta i metodi alle nuove istanze?
E' sufficiente assegnarli all'oggetto membro prototype del costruttore,
che rappresenta il "prototipo" con il quale vengono costruiti tutte le
istanze:

una_funzione_qualsiasi.prototype.COSTANTE = 1;
una_funzione_qualsiasi.prototype.ciao = ciao;

var oggetto = new una_funzione_qualsiasi();
var altro_oggetto = new una_funzione_qualsiasi();

alert(oggetto.COSTANTE); // => 1
alert(altro_oggetto.COSTANTE); // => 1

oggetto.ciao() // => [object Object]
altro_oggetto.ciao() // => [object Object]

Non conosco proprio la sintassi. Il nome della funzione? e tutta quella roba
a sinistra del segno uguale separata da punti?
Boh, io richiamo le funzioni con il nome di funzione tipo:
onMouseOver="rollami(this)"; e la funzione rollami sarà qualcosa del tipo:
function rollami(pulsante){
...
}
Sono iNiorantissimo, mi spiegheresti gentilmente la riga sopra?

La prima parte della funzione l'ho capita, cioè la costruzione del path ma
quella sotto sull'incremento de frame, è un po' dura...
A parte che c'è sempre quel this che non so cosa sia, oltre alla solita
sintassi di introduzione alla funzione che non comprendo proprio, come ho
scritto sopra. Ho visto che usi il modulo, ma non capisco il funzionamento:
non bastava aumetarlo di 1 tipo indice_frame++ ?

il modulo serve a ricominciare da zero quando, incrementando
incrementando, superi il numero di frames disponibili.

Altrimenti che animazione ciclica sarebbe?

// Crea e avvia un'animazione
new AnimazioneCiclica().avvia();

Questa poi... neanche la commento, perché non so da dove partire :-)

e' una chiamata concatenata, equivale a:

var animazione = new AnimazioneCiclica();
animazione.avvia();

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

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

"delphine" <it.emeraldion (AT) claudio (DOT) REVERSE> ha scritto

this e' un riferimento all'oggetto nel cui contesto viene eseguita una
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

delphine <it.emeraldion (AT) claudio (DOT) REVERSE> wrote:

Per dirla semplice, quando tu invochi un metodo di un oggetto, stai
eseguendo una funzione come le altre, con l'eccezione che la variabile
this fa riferimento all'oggetto.

Se la funzione e' un metodo, this "punta" all'oggetto, altrimenti
"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]

--
Local candidates only, no relocation