Far Muovere

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.xpos
Che 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.

Far Muovere ad un Dato Angolo

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
copyright 1998 Dan Steinman