Far muovere gli oggetti è una tecnica di JavaScript che produce nella pagina le animazioni o effetti movimento. Reiterando le funzioni (cioè creando dei loop) e facendo muovere i layer di piccoli incrementi potrete costruire qualsiasi tipo di movimento che vi venga in mente.
L'idea principale si basa sul codice di movimento:
block.xpos += 5 block.left = block.xposChe muove il layer di 5 pixel verso destra. Quindi inserite il codice dentro ad un loop:
function slide() { if (block.xpos < 300) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }
La if sta lì a determinare quando deve terminare l'animazione. In questo caso la funzione terminerà quando la posizione x avrà superato i 300 pixel. La funzione setTimeout() è quella che crea il loop. Dopo un certo ammontare di millesecondi, eseguirà qualsiasi cosa stia tra le virgolette. Così l'esecuzione di questa funzione verrà ripetuta ogni 30 millisecondi.
Cliccate qui per vedere questo esempio.
Naturalmente non è molto più difficile muovere su una direttrice diagonale - basta cambiare i valori sia di xpos (left) sia di ypos (top). Cliccate qui per vedere l'esempio della diagonale.
Utilizzando un po' della trigonometria fatta nelle Superiori possiamo stabilire come far muovere un elemento di un qualsiasi angolo. Nel caso aveste dimenticato qui c'è un piccolo diagramma per rinfrescarvi la memoria:
Ora per inizializzare l'oggetto e includere anche gli angoli avete bisogno di 4 nuove proprietà:
object.angle = 30 object.xinc = 5*Math.cos(object.angle*Math.PI/180) object.yinc = 5*Math.sin(object.angle*Math.PI/180) object.count = 0
Calcoliamo gli incrementi di x e y e li usiamo per far muovere i valori left e top. Dovete moltiplicare l'angolo per Math.PI/180 in modo da convertire l'angolo in radianti - sin e cos sono sempre calcolati in radianti. La proprietà count verrà utilizzata per reiterare la funzione determinando quante volte debba looppare.
Usando di nuovo il mio block, qui ci sono alcune codifiche per muovere un elemento ad un dato angolo.
function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.ypos = parseInt(block.top) block.angle = 30 block.xinc = 5*Math.cos(block.angle*Math.PI/180) block.yinc = 5*Math.sin(block.angle*Math.PI/180) block.count = 0 } function slide() { if (block.count < 25) { block.xpos += block.xinc block.ypos -= block.yinc block.left = block.xpos block.top = block.ypos block.count += 1 setTimeout("slide()",30) } else block.count = 0 }
La if (block.count < 25) significa che la funzione verrà eseguita 25 volte prima che si fermi. Block si muoverà per un totale di 125 unità pixel.
Cliccate qui per vedere questo esempio.
Ho anche creato un esempio di movimento angolare che vi permette di cambiare l'angolo. Cliccate qui per vederlo.
Home | Prossima Lezione: Animazioni col Mouse |