Fortgeschrittene Animationen
Im letzten Kapitel haben wir einigeeinfache Animationen erstellt und kennengelernt, wie man Dinge in Bewegung setzt. In diesem Teil nehmen wir die Bewegung selbst genauer unter die Lupe und fügen einigen physikalischen Eigenschaften hinzu, um unsere Animationen weiter zu verfeinern.
Einen Ball zeichnen
Wir werden einen Ball für unsere Animationsexperimente verwenden, also lassen Sie uns diesen Ball zuerst auf die Leinwand zeichnen. Der folgende Code wird uns dabei einrichten.
<canvas width="600" height="300"></canvas>Wie gewohnt benötigen wir zuerst einen Zeichenkontext. Um den Ball zu zeichnen, erstellen wir einball Objekt, das Eigenschaften und einedraw() Methode enthält, um es auf die Leinwand zu malen.
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const ball = { x: 100, y: 100, radius: 25, color: "blue", draw() { 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();Nichts Besonderes hier, der Ball ist eigentlich ein einfacher Kreis und wird mit Hilfe derarc() Methode gezeichnet.
Geschwindigkeit hinzufügen
Jetzt, da wir einen Ball haben, können wir, wie imletzten Kapitel dieses Tutorials gelernt, eine einfache Animation hinzufügen. Wieder hilft unswindow.requestAnimationFrame() bei der Steuerung der Animation. Der Ball wird in Bewegung gesetzt, indem ein Geschwindigkeitsvektor zur Position hinzugefügt wird. Für jedes Framelöschen wir zudem die Leinwand, um alte Kreise aus vorherigen Frames zu entfernen.
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let raf;const ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: "blue", draw() { 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", (e) => { raf = window.requestAnimationFrame(draw);});canvas.addEventListener("mouseout", (e) => { window.cancelAnimationFrame(raf);});ball.draw();Begrenzungen
Ohne eine Begrenzungskollisionstestung verlässt unser Ball schnell die Leinwände. Wir müssen prüfen, ob diex undy Position des Balls außerhalb der Leinwanddimensionen liegt und die Richtung der Geschwindigkeitsvektoren umkehren. Dazu fügen wir die folgenden Überprüfungen zurdraw Methode hinzu:
if ( ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius) { ball.vy = -ball.vy;}if ( ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) { ball.vx = -ball.vx;}Erste Demo
Schauen wir uns an, wie es in Aktion aussieht.
HTML
<canvas width="600" height="300"></canvas>#canvas { border: 1px solid black;}JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let raf;const ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: "blue", draw() { 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; if ( ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius ) { ball.vy = -ball.vy; } if ( ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius ) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw);}canvas.addEventListener("mouseover", (e) => { raf = window.requestAnimationFrame(draw);});canvas.addEventListener("mouseout", (e) => { window.cancelAnimationFrame(raf);});ball.draw();Ergebnis
Bewegen Sie Ihre Maus in das Canvas, um die Animation zu starten.
Beschleunigung
Um die Bewegung realer zu gestalten, können Sie beispielsweise folgenden Trick mit der Geschwindigkeit ausprobieren:
ball.vy *= 0.99;ball.vy += 0.25;Dies verlangsamt die vertikale Geschwindigkeit bei jedem Frame, sodass der Ball am Ende nur noch auf dem Boden hüpft.
Zweite Demo
HTML
<canvas width="600" height="300"></canvas>#canvas { border: 1px solid black;}JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let raf;const ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: "blue", draw() { 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; ball.vy *= 0.99; ball.vy += 0.25; if ( ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius ) { ball.vy = -ball.vy; } if ( ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius ) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw);}canvas.addEventListener("mouseover", (e) => { raf = window.requestAnimationFrame(draw);});canvas.addEventListener("mouseout", (e) => { window.cancelAnimationFrame(raf);});ball.draw();Ergebnis
Nachzieheffekt
Dritte Demo
HTML
<canvas width="600" height="300"></canvas>#canvas { border: 1px solid black;}JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let raf;const ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: "blue", draw() { 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.fillStyle = "rgb(255 255 255 / 30%)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= 0.99; ball.vy += 0.25; if ( ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius ) { ball.vy = -ball.vy; } if ( ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius ) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw);}canvas.addEventListener("mouseover", (e) => { raf = window.requestAnimationFrame(draw);});canvas.addEventListener("mouseout", (e) => { window.cancelAnimationFrame(raf);});ball.draw();Ergebnis
Maussteuerung hinzufügen
Vierte Demo
HTML
<canvas width="600" height="300"></canvas>#canvas { border: 1px solid black;}JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let raf;let running = false;const ball = { x: 100, y: 100, vx: 5, vy: 1, radius: 25, color: "blue", draw() { 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 = "rgb(255 255 255 / 30%)"; 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.radius || ball.y + ball.vy < ball.radius ) { ball.vy = -ball.vy; } if ( ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius ) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw);}canvas.addEventListener("mousemove", (e) => { if (!running) { clear(); ball.x = e.clientX; ball.y = e.clientY; ball.draw(); }});canvas.addEventListener("click", (e) => { if (!running) { raf = window.requestAnimationFrame(draw); running = true; }});canvas.addEventListener("mouseout", (e) => { window.cancelAnimationFrame(raf); running = false;});ball.draw();Ergebnis
Bewegen Sie den Ball mit Ihrer Maus und lassen Sie ihn mit einem Klick los.
Breakout
Dieses kurze Kapitel erklärt nur einige Techniken, um fortgeschrittenere Animationen zu erstellen. Es gibt noch viele weitere! Wie wäre es, ein Paddle und einige Ziegel hinzuzufügen und diese Demo in einBreakout Spiel zu verwandeln? Schauen Sie sich unserenSpielentwicklung Bereich für weitere gamingbezogene Artikel an.
Siehe auch
MDN-Feedback-Box
Diese Seite wurde automatisch aus dem Englischen übersetzt.