Come creare un animazione in JavaScript (2)
02 novembre 2017
Partendo dall'animazione precedente, Come creare un animazione in JavaScript, è possibile riorganizzare un po' il codice per gestire più oggetti animati.
Per prima cosa definisco un array sprites per contenere tutti gli oggetti da animare:
poi creo una funzione per aggiungere gli sprite:
in questo caso ogni oggetto (sprite) ha le proprietà x, y e radius per rappresentare la posizione nel canvas e le dimensioni dell'oggetto. Una proprietà color che definisce il colore di riempimento e due proprietà deltaX e deltaY che specificano la velocità con cui si muoverà lo sprite.
Il passo successivo è aggiungere una funzione per animare gli sprites e aggiornare le coordinate x e y in funzione della velocità deltaX e deltaY:
e un altra per disegnarli sul canvas
a questo punto non rimane che modificare la funzione animationLoop per richiamare updatePosition e draw:
ed infine inizializzare gli sprites e far partire l'animazione:
Il risultato è l'animazione a inizio pagina con due palline, una gialla e una rossa che si muovono con differenti velocità.
Se non vedi l'animazione clicca sul canvas o ricarica la pagina
Per prima cosa definisco un array sprites per contenere tutti gli oggetti da animare:
JavaScript
const sprites = [];
JavaScript
//e gestisco lo scpostamento sull'asse x (deltaX) e y (DeltaY)
function createSprites() {
sprites.push({
x: canvas.width / 2,
y: canvas.height / 2,
radius: 35,
color: "red2",
deltaX: 1,
deltaY: 2,
});
sprites.push({
x: 50,
y: 50,
radius: 15,
color: "yellow",
deltaX: 4,
deltaY: 0,
});
}
Il passo successivo è aggiungere una funzione per animare gli sprites e aggiornare le coordinate x e y in funzione della velocità deltaX e deltaY:
JavaScript
function updatePosition() {
sprites.forEach(sprite => {
// per ogni oggetto calcolo la nuova posizione
sprite.x += sprite.deltaX;
sprite.y += sprite.deltaY;
});
}
JavaScript
function draw() {
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
//inizio l'animazione
sprites.forEach(sprite => {
//disegno gli oggetti nella nuova posizione
ctx.beginPath();
ctx.fillStyle = sprite.color;
ctx.arc(sprite.x, sprite.y, sprite.radius, 0, 2 * Math.PI);
ctx.fill();
});
}
JavaScript
function animationLoop() {
updatePosition();
draw();
requestAnimationFrame(animationLoop);
}
JavaScript
function init() {
createSprites();
animationLoop();
}
init();
- Come creare un animazione in JavaScript
- Come creare un animazione in JavaScript (2)
- Come creare un animazione in JavaScript (3)
- Come creare un animazione in JavaScript (4) - collisioni
- Come creare un animazione in JavaScript (5) - tastiera
- Come creare un animazione in JavaScript (6) - mouse
- Come creare un animazione in JavaScript (7) - immagini