Advanced animations
No último capítulo nós fizemos algumas animações básicas e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.
Desenhe uma bola
Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.
<canvas id="canvas" width="600" height="300"></canvas>
Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = {
x: 100,
y: 100,
radius: 25,
color: "blue",
draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
},
};
ball.draw();
Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de
arc()
method.
Adicionando velocidade
Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, window.requestAnimationFrame()
ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também clearo canvas para remover velhor círculos da prioridade dos frames.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;
var ball = {
x: 100,
y: 100,
vx: 5,
vy: 2,
radius: 25,
color: "blue",
draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
},
};
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener("mouseover", function (e) {
raf = window.requestAnimationFrame(draw);
});
canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
});
ball.draw();
Limites
Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
Primeira demonstração
Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.
Aceleração
Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:
ball.vy *= 0.99;
ball.vy += 0.25;
Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.
Efeito de arrastar
Adicione um controle de mouse
Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover, por exemplo. O clique por exemplo. O evento clique que
libera a bola e deixa seu limite de novo.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var raf;
var running = false;
var ball = {
x: 100,
y: 100,
vx: 5,
vy: 1,
radius: 25,
color: "blue",
draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
},
};
function clear() {
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function draw() {
clear();
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener("mousemove", function (e) {
if (!running) {
clear();
ball.x = e.clientX;
ball.y = e.clientY;
ball.draw();
}
});
canvas.addEventListener("click", function (e) {
if (!running) {
raf = window.requestAnimationFrame(draw);
running = true;
}
});
canvas.addEventListener("mouseout", function (e) {
window.cancelAnimationFrame(raf);
running = false;
});
ball.draw();
Mova a bola usando seu mouse e libere - o com um clique.
Sair
Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.