J'ai récemment réalisé un projet où il est nécessaire de réaliser les effets d'animation de la pluie et de la neige légère, j'ai donc fait un composant de goutte ici pour montrer les objets en chute communs de cette toile. Avant de vous présenter le texte principal, permettez-moi de vous montrer les rendus:
Rendu d'affichage:
Il pleut et neige
Ça a l'air bien. Par rapport à l'utilisation de la création d'éléments DOM pour créer des images de mouvement de position multi-objets, l'utilisation de Canvas sera plus facile et plus rapide, et les performances seront meilleures.
Code d'appel
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <itle> document </ title> <style> #canvas {width: 100%; height: 100%;} </ style> </ head> <body> <canvas id = "Canvas"> </ Canvas> src="canvasDrop.js"></script><script>canvasDrop.init({type: "rain", // drop type, rain or snowspeed: [0.4,2.5], //speed range size_range: [0.5,1.5],//The size and radius range hasBounce: true, //Is there any rebound effect or false, wind_direction: -105 //The angle Hasgravity: true // y a-t-il une considération de gravité}); </ script> </body> </html>Ok, expliquons le principe de mise en œuvre simple. Tout d'abord, définissez certaines variables globales que nous utiliserons, telles que l'angle de direction du vent, la probabilité, les données d'objet, etc.
Définir les variables globales
// Définir deux données d'objet // L'objet objet Drops Drop Object // et l'objet rebond rebonds object var drops = [], rebonces = []; // l'accélération de la gravité est définie sur 0,2 / un cadre var Gravity = 0,2; var Speed_X_X, // Accélération horizontale Speed_X_Y, // Longiline Acceleral_Aanger; // direction du vent // la largeur et la hauteur des pixels du canevas var canvaswidth, canvasheight; // la probabilité de créer Drop var drop_chance; // Configurer l'objet var opts; // par défaut s'il y aura une méthode de demande de la deuxième fenêtre. || window.webkitRequestanimationFrame || window.mozrequestanimationframe || window.OorequestanimationFrame || window.msRequestanimationFrame || function (callback) {window.setTimeout (callback, 1000/30);};Définissez l'objet central
Ensuite, nous devons définir plusieurs objets importants. Il y a moins d'objets que l'organisation doit définir. Au total, seuls trois objets principaux sont définis dans l'ensemble du composant Drop, qui sont les suivants:
Objet Vector Velocity, avec des unités horizontales X et Vertical Y Velocity Taille: V = Pixels / cadres de déplacement
La compréhension de l'objet vectoriel est également très simple et brut, ce qui est d'enregistrer la vitesse de la chute de l'objet en chute / V
var vector = function (x, y) {// Attribut privé Velocity horizontal x, Velocity vertical ythis.x = x || 0; this.y = y || 0;}; // Méthode publique - Ajouter: Fonction de changement de vitesse, augmenter la vitesse en fonction des paramètres // En raison des besoins de l'entreprise, toute l'accélération qui baisse est considérée, donc il n'y a pas de ralentissement, et il peut être élargi au stade ultérieur / ** @param v Objet || String * / vector.prototype.add = function (v) {if (vx! = null && vy! = null) {this.x + = vx; this.y + = vy;} else {this.x + = v; this.y + = v;} return this;}; // public methodo {// Renvoie une instance vectorielle avec le même attribut de vitesse renvoie un nouveau vecteur (this.x, this.y);}; déposez l'objet Drop Object, c'est-à-dire les gouttes de pluie et la neige dans l'effet ci-dessus, plus tard, vous pouvez l'étendre en météorite ou coquille. La définition de base de l'objet DROP est la suivante // constructeur var drop = function () {/ * .... * /}; // Méthode publique-update drop.prototype.update = function () {/ * .... * /}; // public method-drawdrop.prototype.draw = function () {/ * ...... * /};Après avoir lu les trois méthodes ci-dessus, avez-vous deviné leur rôle? Comprenons ce que font ces trois méthodes.
Constructeur
Le constructeur est principalement responsable de la définition des informations initiales de l'objet Drop, telles que la vitesse, les coordonnées initiales, la taille, l'accélération, etc.
// Constructeur Dropvar Drop = function () {// Random définir les coordonnées initiales de Drop // Sélectionnez d'abord l'élément tombant à partir duquel le côté est celui de var randomEdge = Math.Random () * 2; if (randomEdge> 1) {this.pos = new vector (50 + math.random () * canvas.width, -80); Math.random () * canvas.height);} // définir la taille de l'élément de chute // la valeur aléatoire est prise par la plage de rayon de la fonction appelée opts this.radius = (opts.size_range [0] + math.random () * opts.size_range [1]) * dpr; // Obtenir la vitesse de baisse initiale // la valeur aléatoire par la plage de vitesse appelée de la fonction Opte (Opts.speed [0] + math.random () * opts.speed [1]) * dpr; this.prev = this.pos; // multipliez l'angle par 0,017453293 (2pi / 360) pour le convertir en radians. var chaqueager = 0,017453293; // Obtenez l'angle de direction du vent wind_anger = opts.wind_direction * chaqueager; // obtenez l'accélération latérale speed_x = this.speed * math.cos (wind_anger); // obtenez l'accélération longitudinale speed_y = - this.speed * math.Sin (wind_anger); // lier une instance de vitesse.Mettre à jour la méthode de l'objet Drop
La méthode de mise à jour est responsable de la modification des attributs de chaque instance de dépôt de trame, comme la modification du déplacement.
Drop.prototype.update = function () {this.prev = this.pos.copy (); // s'il y a la gravité, la vitesse longitudinale sera augmentée si (opts.hasgravity) {this.vel.y + = gravity;} // this.pos.addd (this.vel);};La méthode de dessin de l'objet Drop
La méthode Draw est responsable du dessin de chaque instance de chute de trame
Drop.prototype.draw = function () {ctx.beginpath (); ctx.moveto (this.pos.x, this.pos.y); // il n'y a actuellement que deux situations, une est la pluie, c'est-à-dire la courbe de bezier if (opts.type == "rain") {ctx.Moveto (this.prev.x, this.rev.y); Math.abs (this.radius * math.cos (wind_anger)); var ay = math.abs (this.radius * math.sin (wind_anger)); ctx.beziercurveto (this.pos.x + ax, this.pos.y + ay, this.prev.x + ax, this.prev.y + ay, this.pos.x, this.pos.y); ctx.stroke (); // l'autre est neige---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Bouncez l'objet de rebond de tomber et de tomber, c'est-à-dire les gouttelettes d'eau qui rebondissent de l'eau de pluie au-dessus, vous pouvez également vous développer en retroussant du gravier ou de la fumée à l'étape ultérieure
La définition est très simple, donc je ne l'expliquerai pas en détail ici
var bounce = fonction (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.pos.add (this.vel);}; Bounce.prototype.Draw = function () {ctx.begath (); ctx.arc (this.pos.x, this.pos.y, this.radius * dpr, 0, math.pi * 2); ctx.fill ();};Interface externe
mise à jour
C'est-à-dire la fonction de démarrage équivalente à toute l'animation en toile
function update () {var d = new Date; // nettoyer le dessin ctx.clearrect (0, 0, canvas.width, canvas.height); var i = dropS.length; while (i--) {var drop = drops [i]; drop.update (); // si l'instance de drop drops. {// Si vous avez besoin de rebond, ajoutez l'instance de rebond au tableau de rebond if (opts.hasbounce) {var n = math.round (4 + math.random () * 4); tandis que (n -) rebonces.push (new Bounce (drop.pos.x, canvas.height));} // Si l'instance de dépôt tombe vers le bas, vous devez être clair dans le tableau de gouttes de l'objet d'instance Drop.splice (i, 1);} Drop.Draw ();} // Si vous avez besoin de rebondir if (opts.hasbounce {var bounce = rebonces [i]; Bounce.update (); Bounce.draw (); if (Bounce.pos.y> canvas.height) rebonces.splice (i, 1);}} // si le nombre de générés à chaque fois est if (dropS.Lengthre Opts.numlevel; for (; i <len; i ++) {dropS.push (new Drop ());}}} // Loop UpdateRequestanImFrame (mise à jour);}init
Interface init, initialisez toutes les propriétés de base de l'ensemble du toile de toile, telles que l'obtention du rapport pixel de l'écran et la définition de la taille des pixels de la toile et la définition du style de la toile
Fonction init (opts) {opts = opts; canvas = document.getElementById (opts.id); ctx = canvas.getContext ("2d"); /// compatible avec les écrans à haute affinition, les pixels Canvas Canvas doivent également modifier la taille DPR = Window. Les écrans, de sorte que la longueur et la largeur de la toile artboard doivent être multipliées par dpr canvaswidth = canvas.clientwidth * dpr; canvasheight = canvas.clientHeight * dpr; // définir la largeur et la hauteur de l'artboard canvas.width = canvaswidth; canvas.height = canevasheight; drop_chance = 0. //20. setStyle ();} fonction setStyle () {if (opts.type == "rain") {ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba (223,223,223,0.6)'; ctx.fillstyle = 'rgba (223 223,223,0.6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254 254.254,0.8)'; ctx.fillstyle = 'rgba (254,254,254,0.8)';}}Conclusion
OK, un simple composant de chute a été achevé, bien sûr, il y a beaucoup de choses qui ne sont pas parfaites. Après avoir écrit ce composant Drop, pour la mise en œuvre de l'animation de Canvas, je crois qu'il existe de nombreux endroits à découvrir dans la scène H5.
Enfin, parlons des lacunes et des travaux ultérieurs:
0. Il n'y a pas assez d'interfaces externes pour ce composant, la plage réglable n'est pas très grande et l'abstraction n'est pas très approfondie.
1. Setstyle Set Style Basic
2. Personnalisation des méthodes de mise à jour et de dessin d'objets de dépôt et de rebond permet aux utilisateurs de définir plus de formulaires et d'effets de style de la vitesse de chute et de changement de taille.
3. L'interface pour les opérations de pause, d'accélération et de décélération d'animation doit être ajoutée.
Ce qui précède est la connaissance pertinente de JS et de toile que je vous ai présenté sur la réalisation d'effets pluvieux et neigeux. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!
Cet article est reproduit: http://blog.csdn.net/xllily_11/article/details/51444311