animazione con js

[twing]

Ciao a tutti,
premetto che non sono molto ferrata con js, ho fatto qualche funzione molto semplice niente di più. Il problema è che il prof all'università ci ha chiesto di realizzare un sito web utilizzando html e js e creando delle animazioni. Mi spiego meglio, ad esempio devo simulare il comportamento dell'algoritmo di ordinamento bubble sort graficamente disegnando un array e facendo vedere come gli elementi si scambiano di posto per ordinare l'array. Qualcuno ha un suggerimento da darmi su come fare ciò in js???
Grazie mille

[artorius]

puoi usare delle librerie grafiche o devi fare tutto da zero?

[twing]

purtroppo non posso usare librerie grafiche, il prof ci ha detto che è meglio di no!

[artorius]

allora... le animazioni sono un pelo complesse da implementare da zero. Comunque, hai già in mente quello che vorresti fare?

[twing]

Si, una mezza idea ce l'avrei... Pensavo di disegnare un array con i numeri all'interno e poi far spostare le caselle magari cambiando anche colore... ma non so se è troppo complicato... volevo capire da dove partire, perchè non ho idea di come realizzare qualcosa del genere. Grazie mille per la tua disponibilità!

[artorius]

allora, le animazioni sono diverse dalle modifiche di stile.

Per darti un idea di quello di cui sto parlando: http://artorius.netsons.org/prove/an...Modifiche.html

Se vuoi implementare solo delle modifiche di stile è una cosa semplice, cambio colori, sposto in basso in alto, sono cose facili da implementare.

Ma le animazioni, necessitano di implementare una funzione con setInterval che viene bloccato al momento giusto, aumentando di un tot lo stile ogni iterazione.

Puoi provare a fare un paio di cose ad hoc, ma non saranno mai molto riutilizzabili.

[twing]

Penso che basti implementare le modifiche di stile, ho visto l'esempio che mi hai postato fa proprio al caso mio, o almeno spero che il prof si accontenti!!
Il tuo esempio è realizzato esclusivamente in js? Il codice lo trovo all'interno della pagina?
Ti ringrazio tantissimo...

[artorius]

allora, per implementare delle modifiche ad un elemento HTML devi prima ottenerlo, tipo con il document.getElementById(), poi puoi alterare la propriertà CSS corrispondente.

Io ti raccomanderei di usare il marginTop e non il top:

<div id="MyDiv">
   Questo div si sposta cliccando qui
</div>

Poi implementi il JS:

var totMargin = 0, toAdd = 50;

window.onload = function(){
   document.getElementById("MyAction").onclick = function(){
      var Mdiv = document.getElementById("MyDiv");
      Mdiv.style.marginTop = Mdiv.style.marginTop == '' ? toAdd+"px" : (parseInt(Mdiv.style.marginTop) + toAdd)+"px";
   };
}

Questo è sufficiente, se invece implementassi una libreria JS come Mootools potresti fare molte più cose.

[twing]

Grazie, ho provato il tuo esempio e funziona. Provo ad adattarlo alle mie esigenze e se ho altri dubbi, ti disturbo nuovamente...