Ich habe kürzlich ein Projekt erstellt, bei dem die Animationseffekte von Regen und leichtem Schnee erfasst werden müssen. Deshalb habe ich hier eine Tropfenkomponente erstellt, um die gängigen fallenden Objekte dieser Leinwand zu zeigen. Bevor Sie Ihnen den Haupttext vorstellen, lassen Sie mich Ihnen die Renderings zeigen:
Renderings anzeigen:
Es regnet und schneit
Es sieht gut aus. Im Vergleich zur Verwendung der Erstellung von DOM-Elementen zum Erstellen von Multi-Objekt-Positionsbewegungsbildern ist die Verwendung von Leinwand einfacher und schneller, und die Leistung wird besser.
Anrufcode
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#canvas{width:100%;height: 100%;}</style></head><body><canvas id="canvas"></canvas><script src = "canvasdrop.js"> </script> <Script> canvasdrop.init ({Typ: "Regen", // Tropfentyp, Regen oder SnowSpeed: [0.4,2.5], // Geschwindigkeitsbereich Größe_Range: [0,5,1.5], // Die Größe und Radius -Reichweite. Hasgravity: TRUE // Gibt es eine Schwerkraftbeachtung}); </script> </body> </html>Ok, erläutern wir das einfache Implementierungsprinzip. Definieren Sie zunächst einige globale Variablen, die wir verwenden, z. B. Windrichtungwinkel, Wahrscheinlichkeit, Objektdaten usw.
Definieren Sie globale Variablen
// zwei Objektdaten definieren // Die Drops Drop -Objektobjektobjekt Objekt // und Rebound -Objekt beschreiten Objekt var drops = [], beunnungen = []; // Die Schwerkraftbeschleunigung wird auf 0.2/ein Frame var Gravity = 0.2; var speed_x_x, // Horizontal Acceleration Speed_x_y, // Longiline Acceleration Wind_anger; // Windrichtung // Die Pixelbreite und Höhe der Leinwand var canvaswidth, canvasheight; // die Wahrscheinlichkeit, Drop var Drop_chance zu erstellen; // Objekt var konfigurieren; // Standard, ob es eine RequestAnimationFrame -Methode gibt. || window.webkitRequestanimationFrame || window.mozRequestanimationFrame || window.orequestanimationFrame || window.msRequestanimationFrame || Funktion (Rückruf) {Window.Settimeout (Rückruf, 1000 /30);};Definieren Sie das Kernobjekt
Als nächstes müssen wir mehrere wichtige Objekte definieren. Es gibt weniger Objekte, die die Organisation definieren muss. Insgesamt werden in der gesamten Tropfenkomponente nur drei Kernobjekte definiert, die wie folgt sind:
Vektorgeschwindigkeitsobjekt mit horizontalen X- und vertikalen Y -Geschwindigkeitsgröße Einheiten: V = Verschiebungspixel/Frames
Das Verständnis des Vektorobjekts ist auch sehr einfach und grob, nämlich die Geschwindigkeit des fallenden Objektabfalls/V aufzunehmen
var vector = function (x, y) {// Private Attribut Horizontale Geschwindigkeit x, vertikale Geschwindigkeit ythis.x = x || 0; this.y = y || 0;}; // öffentliche Methode- Hinzufügen: Geschwindigkeitsänderungsfunktion, erhöhen Sie die Geschwindigkeit gemäß den Parametern // Aufgrund der geschäftlichen Bedürfnisse wird die gesamte fallende Beschleunigung berücksichtigt, sodass es keine Verlangsamung gibt und es in der späteren Stufe erweitert werden kann/** @param v-Objekt || String */vector.prototype.add = Funktion (v) {if (vx! = null && vy! {// Geben Sie eine Vektorinstanz mit demselben Geschwindigkeitsattribut zurück, den neuen Vektor (this.x, this.y); Die grundlegende Definition des Drop-Objekts lautet wie folgt // Konstruktor var drop = function () {/ * .... */}; // public-Methode-update Drop.Prototype.Update = function () {/ * .... */}; // public method-drawdrop.prototype.draw = function () {/ * ...... */};Haben Sie nach dem Lesen der oben genannten drei Methoden ihre Rolle erraten? Lassen Sie uns verstehen, was diese drei Methoden tun.
Konstruktor
Der Konstruktor ist hauptsächlich für die Definition der anfänglichen Informationen des Drop -Objekts wie Geschwindigkeit, anfängliche Koordinaten, Größe, Beschleunigung usw. verantwortlich.
// Constructor Dropvar Drop = function () {// Zufalls die anfänglichen Koordinaten von Drop // Erstes das fallende Element aus, aus welchem Seite die Seite von var randomEdge = math.random () * 2; if (randomedge> 1) {this.pos = new Vector (50 + math.random () * canvas (canvas (canvas); Math.random () * canvas.height);} // Die Größe des fallenden Elements festlegen // Zufallswert wird durch den Radiusbereich der genannten OPTS -Funktion genommen. (Opts.speed [0] + math.random () * opts.speed [1]) * DPR; this.prev = this.pos; // Multiplizieren Sie den Winkel mit 0,017453293 (2PI/360), um ihn in Radians umzuwandeln. var echus = 0,017453293; // Erhalten Sie den Winkel der Windrichtung wind_anger = opts.wind_direction * ENGERAGE; // Erhalten Sie die laterale Beschleunigungsspeed_x = this.Aktualisieren Sie die Methode des Drop -Objekts
Die Aktualisierungsmethode ist für die Änderung der Attribute der einzelnen Frame -Drop -Instanz verantwortlich, z. B. das Ändern der Verschiebung.
Drop.prototype.update = function () {this.prev = this.pos.copy (); // Wenn es die Schwerkraft gibt, wird die Längsgeschwindigkeit erhöht, wenn (opts.hasgravity) {this.vel.y += Gravity;} // this.pos.add (this.vel);};};};};};Die Zeichnung Methode des Drop -Objekts
Die Zeichnungsmethode ist für das Zeichnen jeder Frame -Drop -Instanz verantwortlich
Drop.prototype.draw = function () {ctx.beginPath (); ctx.moveto (this.pos.x, this.pos.y); // Derzeit gibt es nur zwei Situationen, einer ist Regen, d. H. Bezier curve if (opts.type == "rain") {ctx.move (this.th) (this. this.moveto (this.moveto Math.abs (this.radius * math.cos (wind_anger)); var y Math.abs (this.radius * math.sin (wind_anger)); this.pos.y); ctx.stroke (); // das andere ist Schnee---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Bringen Sie das Objekt des Rückpralls vom Sturz und Fallen ab, dh den Wassertropfen, die sich vom Regenwasser oben erholen
Die Definition ist sehr einfach, daher werde ich sie hier nicht ausführlich erklären
var Bounce = function(x, y) {var dist = Math.random() * 7;var angle = Math.PI + Math.random() * Math.PI;this.pos = new Vector(x, y);this.radius = 0.2+ Math.random()*0.8;this.vel = new Vector(Math.cos(angle) * dist,Math.sin(angle) * dist);}; Bounce.Prototype.Update = function () {this.vel.y += Gravity; this.vel.x *= 0,95; this.vel.y *= 0,95; this.radius * dpr, 0, math.pi * 2); ctx.fill ();};Externe Schnittstelle
aktualisieren
Das heißt, die Startfunktion entspricht der gesamten Leinwandanimation
Funktion update () {var d = neues Datum; // Reinigen Sie die Zeichnung ctx.clearRect (0, 0, canvas.width, canvas.height); var i = drops.länge; while (i--) {var Drop = Drops [i]; Drop.update (); // Wenn die Drop-Instanz-Drop-Drop-Drop-Drop-Drop-Drops-Array in der Drop-Array-Array-Strops-Array-Strops-Array-Strops-Array-Strops-Regie (Sie müssen in der Drop-Drop-Drop-Drops-Drops-Array-Strops-Argle zu sehen sind. canvas.height) {// Wenn Sie Rückprall benötigen, fügen Sie dem Bounce Array if (opts.hasbounce) {var n = math.round (4 + math.random () * 4) eine Bounce -Instanz hinzu; Während (n-) beschreitet.push (neuer Bounce (Drop.pos.x, Canvas.Height));} // Wenn die Drop-Instanz nach unten fällt, müssen Sie im Drops-Array des Instanzobjekts fallen. (i--) {var bounce = bounces[i];bounce.update();bounce.draw();if (bounce.pos.y > canvas.height) bounces.splice(i, 1);}}//If the number of generated each time is if(drops.length < OPTS.maxNum){if (Math.random() < drop_chance) {var i = 0, len = opts.numlevel; für (; i <len; i ++) {Drops.push (neuer Drop ());}}} // Continuous loop updateRequestanimframe (Update);};};init
Init -Schnittstelle, initialisieren Sie alle grundlegenden Eigenschaften der gesamten Leinwand -Leinwand, z.
Funktion init (opts) {opts = opts; canvas = document.getElementById (opts.id); ctx = canvas.getContext ("2d"); //// kompatibel mit hochdefinitionsbildschirmen, die canvas pixels mussten dpr = windows. Hochdefinitions-Bildschirme, sodass die Länge und Breite der artboard-Leinwand mit DPR Canvaswidth = Canvas multipliziert werden sollte. setStyle ();} Funktion setStStyle () {if (opts.type == "rain") {ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba (223,223,223,0,6)'; 'rgba (223,223,223,0,6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254,254,254,0,8)';Abschluss
OK, eine einfache Tropfenkomponente wurde abgeschlossen. Natürlich gibt es viele Dinge, die nicht perfekt sind. Nachdem ich diese Drop -Komponente für die Animationsimplementierung von Leinwand geschrieben habe, glaube ich, dass es in der H5 -Szene viele Orte entdecken kann.
Lassen Sie uns schließlich über die Mängel und spätere Arbeiten sprechen:
0. Es gibt nicht genügend externe Schnittstellen für diese Komponente, der einstellbare Bereich ist nicht sehr groß und die Abstraktion ist nicht sehr gründlich.
1. SetStyle Set Basic -Stil
2. Die Anpassung der Aktualisierungs- und Zeichnen von Methoden von Drop- und Bounce -Objekten ermöglicht Benutzern, mehr Formulare und Stileffekte der fallenden Geschwindigkeit und Größenänderung festzulegen.
3. Die Schnittstelle für Animations -Pause, Beschleunigung und Verzögerungsvorgänge sollte hinzugefügt werden.
Das obige ist das relevante Wissen über JS und Leinwand, das ich Ihnen über die Erreichung von Regen- und Schneeffekten vorgestellt habe. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!
Dieser Artikel wird reproduziert: http://blog.csdn.net/xllily_11/article/details/51444311