HTML5<canvas></canvas> Die Elemente kombinieren mit der Canvas -API von JavaScript zu einer der wichtigsten Raster -Grafiken und Animationsfunktionen auf Webseiten. Ein h?ufiger Anwendungsfall für Leinwand besteht darin, Bilder programmgesteuert für Websites (insbesondere Spiele) zu generieren. Eine Karten -Solitaire -Spielwebsite, die ich erstellt habe, macht genau das, wo alle Karten und ihre Bewegungen mithilfe von Leinwand durchgeführt werden.

Dieser Artikel konzentriert sich auf Animationen in Leinwand und Techniken, um Animationen reibungsloser zu machen. Wir werden uns darauf konzentrieren, überg?nge (wie "Easy-In" und "Easy-Out") zu lindern , die in Canvas nicht kostenlos wie in CSS verfügbar sind.

Beginnen wir mit einer statischen Leinwand. Ich habe eine Spielkarte von der DOM auf Canvas gezeichnet:

Beginnen wir mit einer einfachen Animation: Verschieben Sie diese Karte auf Leinwand. Selbst eine sehr grundlegende Sache, es muss in Leinwand von Grund auf neu funktionieren, damit wir damit beginnen müssen, Funktionen zu erstellen, die wir verwenden k?nnen.

Zun?chst werden wir einige Funktionen erstellen, um X- und Y -Koordinaten zu berechnen:

 Funktion getX (Params) {
  let distance = params.xto - params.xfrom;
  Sei Stufen = params.frames;
  lass progresor = params.frame;
  Rückstand / Schritte * Fortschritt;
}

Funktion gety (params) {
  let distance = params.yto - params.yfrom;
  Sei Stufen = params.frames;
  lass progresor = params.frame;
  Rückstand / Schritte * Fortschritt;
}

Dies hilft uns, den Positionswert zu aktualisieren, wenn das Bild animiert ist. Wir werden dann die Leinwand immer wieder erneut abbauen, bis die Animation abgeschlossen ist. Wir tun dies, indem wir den folgenden Code zu unserer addImage() -Methode hinzufügen.

 // ... (einige Codes weglassen) ...
if (params.frame <params.frames ... codes weglassen><p> Jetzt haben wir Animation! Wir erh?hen jeweils 1 Einheit stabil, was wir <em>lineare</em> Animationen nennen.</p><p> Sie k?nnen sehen, wie sich die Form linear von Punkt A nach Punkt B bewegt und die gleiche konstante Geschwindigkeit zwischen den beiden Punkten beibeh?lt. Es ist voll funktionsf?hig, aber es fehlt Realismus. Der Start und der Stopp sind abrupt.</p><p> Was wir wollen, ist das Objekt, das sich beschleunigen (Leichtigkeit) und Verz?gerung (Leichterung), damit die Bewegung von Objekten in der realen Welt unter der Wirkung der Reibung und Schwerkraft simulieren kann.</p><p></p><h2> JavaScript -Lockerungsfunktion</h2><p> Wir werden die überg?nge "dreimal" und die Entlastungsauslagerungen verwenden, um dies zu erreichen. Wir haben eine der Gleichungen in Robert Penners Flash -Locking -Funktion ge?ndert, um das zu passen, was wir hier tun m?chten.</p><pre class="brush:php;toolbar:false"> Funktion getease (CurrentProgress, Start, Entfernung, Schritte) {
  Stromprogramm /= Schritte /2;
  if (currentProgress <p> Fügen Sie es in unseren Code ein (dies ist ein <strong>Dreier</strong> ) und wir erhalten ein glatteres Ergebnis. Beachten Sie, wie sich die Karte in Richtung der Mitte des Raums beschleunigt, und verlangsamt sich dann, wenn sie das Ende erreicht.</p><p></p><h2> Erweiterte Lockerung mit JavaScript</h2><p> Wir k?nnen sekund?re oder sinusf?rmige Lockerung verwenden, um langsamere Beschleunigung zu erhalten.</p><pre class="brush:php;toolbar:false"> Funktion getQuadRaticase (Stromprogramm, Start, Entfernung, Schritte) {
  Stromprogramm /= Schritte /2;
  if (currentProgress <p> Für eine schnellere Beschleunigung k?nnen fünf oder exponentielle Lockerung verwendet werden:</p><pre class="brush:php;toolbar:false"> Funktion getQuintizease (CurrentProgress, Start, Entfernung, Schritte) {
  Stromprogramm /= Schritte /2;
  if (currentProgress <p></p><h3> Verwenden Sie GSAP, um komplexere Animationen zu implementieren</h3><p> Es macht Spa?, selbst Lockerungsfunktionen zu schreiben, aber was ist, wenn Sie mehr Kraft und Flexibilit?t wünschen? Sie k?nnen weiterhin benutzerdefinierten Code schreiben oder in Betracht ziehen, leistungsf?higere Bibliotheken zu verwenden. Wenden wir uns dafür an die Greensock Animation Platform (GSAP).</p><p> Mit GSAP wird die Implementierung von Animationen viel einfacher. Nehmen wir dieses Beispiel als Beispiel, die Karte erholt sich am Ende. Beachten Sie, dass die GSAP -Bibliothek in der Demo enthalten ist.</p><p> Die Schlüsselfunktion ist <code>moveCard</code> :</p><pre class="brush:php;toolbar:false"> Funktion meepecard () {
  gsap.to (Position, {
    Dauer: 2,
    Leichtigkeit: "Bounce.out",
    x: Position.xmax,
    y: Position.ymax,
    Onupdate: function () {
      ziehen();
    },
    onComplete: function () {
      Position.x = Position.origx;
      Position.y = Position.origy;
    }
  });
}

In der gsap.to -Methode kommt es zu aller Magie. Für eine Dauer von zwei Sekunden wird das Positionsobjekt aktualisiert und onUpdate wird jedes Mal aufgerufen, wenn es aktualisiert wird, wodurch das Neuzug der Leinwand ausgel?st wird.

Und wir reden nicht nur über den Abpraller. Es gibt eine gro?e Anzahl verschiedener Lockerungsoptionen zur Auswahl.

Zusammenfassen

Sie sind sich immer noch nicht sicher, welche Animationsstil und welche Methode in Leinwand zur Lockerung verwendet werden soll? Hier ist ein Beispiel, das unterschiedliche Lockerungsanimationen zeigt, einschlie?lich der in GSAP bereitgestellten.

Schauen Sie sich mein Solitaire-Spiel an, um eine Live-Demo von Nicht-G-Sap-Animationen zu sehen. In diesem Fall habe ich Animationen hinzugefügt, damit die Karten im Spiel, wenn sie sich zwischen den Haufen bewegen.

Zus?tzlich zur Erstellung von Bewegungen kann die Lockerungsfunktion auf alle anderen Eigenschaften mit einem Start- und Endzustand wie ?nderungen der Deckkraft, der Rotation und der Skalierung angewendet werden. Ich hoffe, Sie k?nnen viele M?glichkeiten finden, Lockerungsfunktionen zu nutzen, um Ihre Anwendung oder Ihr Spiel glatter aussehen zu lassen.

Das obige ist der detaillierte Inhalt vonAnimationen in Leinwand lockern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!