HTML5 canvas: una semplice animazione

Partendo dal post precedente proveremo ad animare il cerchio rosso.

A livello di html non cambia nulla, solo creeremo un canvas 500×100, sarà sufficiente.

La variazione principale consisterà nell’introduzione di questa funzione (banale):

function tick() {
circle.x = circle.x + 5;
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update();
}

che serve per spostare il centro del cerchio di 5px dando lil movimento, ovviamente alla fine dello stage riparte dall’inizio.

Notare e non dimenticare l’update dello stage

Ma la cosa interessante è come si attiva questa funzione, ovvero queste due righe di codice:

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);

Il Ticker da una trasmissione  a intervalli regolari e viene inviata una chiamata alla funzione tick, ad ogni “tick”.

L’ultima opzione consente di impostare la frequenza dei fotogrammi in fotogrammi al secondo (FPS). Ad esempio, con un intervallo di 40, getFPS () restituisce 25 (1000ms al secondo diviso per 40 ms per ogni tick = 25fps).

L’esempio