Récemment, j'ai vu une animation de grille de particules très éblouissante, et j'en ai fait une, et c'était assez bon comme arrière-plan. CSDN ne peut pas télécharger plus de 2 mages, alors coupez simplement une image statique:
Laissez-nous dire comment réaliser cet effet:
Tout d'abord, bien sûr, ajoutez une toile:
<canvas id = canvas> </ canvas>
Le style suivant:
<Style> #Canvas {Position: Absolute;Le rôle de l'index z: -1 de la toile ci-dessus est qu'il peut être placé sous le contexte de certains éléments.
Afin de s'assurer que la toile peut être remplie du navigateur entier, il est nécessaire de régler la hauteur large de la toile sur le même que le navigateur:
Function getSize () {w = canvas.width = window.innerwidth;Les W et H ci-dessus représentent la largeur du navigateur.
Obtenez la largeur du navigateur et l'étape suivante consiste à dessiner des particules.
Var opt = {Particleamount: 50, // Le nombre de particules par défaut: 1, // la vitesse de mouvement des particules variantpeed: 1, // la variable de la vitesse de déplacement des particules: RGB (32 245,245), // la couleur des particules LINECOLOR: RGB (32 245,245), // La couleur de la connexion de la grille Defaultradius: 2, // le rayon de particules variantradius: 2, // la variable du rayon de particules Minddistance: 200 // la distance minimale entre les particules};Les variables de vitesse et les variables de rayon ci-dessus sont pour garantir que la taille et la vitesse des particules ne sont pas exactement les mêmes.
Ensuite, nous créons une classe pour initialiser les particules.
Fonction partitique () {this.x = math.random () * w; .Speed = optionSpeed + opt.variaringspeed * Math.Random (); Color = opt.ParticleColor; ), // Vitesse des particules à l'axe x: this.speed * math.sin (this.directionangle) // La vitesse des particules à l'axe y-axis} this.update = function () {// Fonction de mise à jour des particules this.border (); moment ce.y + = this.vector.y; (this.x> = w || this.x <= 0) {// le nombre négatif this.vector.x * = -1;} if (this.y> = h || this.y <= 0) {// s'il atteint les bordures supérieures et inférieures, faites de la vitesse de l'axe y dans le nombre négatif d'origine ce .vector.y * = -1;} if (this.x> w) {// Ce qui suit est le fonctionnement de la modification de la fenêtre du navigateur dans la taille de la taille, et certaines particules après la taille de la fenêtre seront cachées. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// dessine la fonction des particules ctx. Beginnat ();1. La vitesse et l'angle initial de chaque particule sont générés au hasard et la couleur des particules est déterminée par les options de réglage pertinentes.
2. Ce vecteur est utilisé pour stocker la direction de mouvement des particules: si ce vecteur est 1, les particules se déplacent vers la droite; De même, si ce vecteur est négatif, les particules se déplacent vers le haut et si elle est positive, les particules se déplacent vers le bas.
Cette update est utilisée pour mettre à jour les coordonnées de la position suivante de chaque particule. Premièrement, la détection du bord est effectuée;
3. Le zoom de fenêtre peut entraîner le dépassement des particules, de sorte que la fonction de détection de bord ne peut pas être capturée, donc une série de déclarations IF est nécessaire pour détecter cette situation et réinitialiser la position des particules à la limite de toile actuelle.
4. Dessinez ces points sur la toile dans la dernière étape.
Les particules des particules ont été écrites, et il le dessinera ci-dessous:
Fonction init () {getSize ();L'initialisation ci-dessus de Opt.ParticalAmount a un objet de particules, qui initialise l'objet mais il n'est pas dessiné.
Fonction Loop () {CTX.CLALECT (0,0, W, H); draw ();} window.requestanimationframe (boucle);}Chaque fois que la fonction Loop () est exécutée, le contenu sur la toile sera supprimé, puis la coordonnée des particules est re-calculée via la fonction Update () de l'objet de particules, et les particules sont dessinées via la fonction Draw () de l'objet particule. Ce qui suit est l'effet à ce moment:
Cependant, après la taille de la fenêtre du navigateur, certaines particules disparaîtront.
Window.addeventListener (redimensit, function () {winResize ()}, false);Ensuite, vous devez écrire la fonction WinResize (). et des performances plus consommées. Taille du navigateur.
Var partille = [], w, h; Hauteur, il y a une introduction à}, de retard)} en haut de l'article
De cette façon, toute l'animation des particules est terminée, puis nous pouvons tracer une ligne entre les particules. Letra-le entre eux.
Alors, comment calculer la distance entre les deux particules, vous pouvez penser à la première leçon des mathématiques du lycée, du théorème du pyrothémat, du carré et du carré et du carré et du triangle droit du triangle droit sont égaux au carré de le troisième changement.
Nous connaissons maintenant les coordonnées de l'axe x et de l'axe Y de chaque particule, alors nous pouvons calculer la distance entre les deux points, écrire une fonction et passer les deux points, comme suit:
Fonction getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));}Maintenant, nous pouvons calculer la distance entre deux points, nous calculons donc la distance entre toutes les particules et toutes les autres particules pour déterminer si elles doivent se connecter. Un peu est laid, nous pouvons donc déterminer la transparence de la connexion en fonction de la distance entre les deux particules. Une certaine distance ne sera pas affichée.
Fonction linepoint (point, hub) {for (let i = 0; i <hub.length; i ++) {let distance = getDistance (point, hub [i]); (if (opacity> 0) {ctx.linewidth = 0,5; ctx.strokestyle = rgba (+ line [0] +, + line [1] +, + line [2] +, + opacity +); ctx.beginpath () ; }}}}}}}}Les deux paramètres transmis ci-dessus sont le tableau d'un point et du point entier, laissant l'opacité = 1-disposition / option d'option; est négatif, et les jugements suivants sont filtrés.
var line = option.lineColor.match (// d + / g);
Enfin, la distance de calcul de la distance est en continu dans la fonction Loop ().
Fonction Loop () {CTX.CLALECT (0,0, W, H); Draw ();} pour (que i = 0; i <particule.length; i ++) {// ajoute ce point de ligne cyclique (particule [i], particule)} window.requestanimationframe (Loop);}Il convient de souligner que si vous ajoutez trop de point de point / ou trop de distance de connexion (la distance de connexion créera trop de lignes), l'animation ne sera pas transportée. Lorsque le port de vue se rétrécit, il est préférable de réduire la vitesse de mouvement des particules: plus la taille des particules est petite et la vitesse de déplacement dans l'espace étroit semble plus rapide.
Afficher l'intégralité du code:
<! 0; Canvas); var ctx = canvas.getContex (2d); ), // La couleur des particules LineColor: RGB (32,245,245), // La couleur de la grille reliant la couleur Defaultradius: 2, // Radius de particules Variantradius: 2, // L'esprit variable du rayon des particules: 200 / / Le fil connecté entre les particules de distance minimale}; ; () {GetSize (getSIZE); libre (laissez i = 0; i <opt.ParticalAmount; i ++) {partitical.push (new partitical ());} Loop ();); i <particule.length; i ++) {parti [i] .update (); Linepoint (particule [i], particule)} window.requestanimationframe (Loop);} fonction linepoint line (point, hub) {for (que i = 0; i <hub.length; i ++) let Dissened = GetDistance (point, Hub [i]); + line [2] +, + opacité); .ClosePath (); -Point2.y, 2));} Fonction GetSize (W = canvas.width = Window.InnerWidth; coordonnée x-axes des particules this.y = math.random () * h; La vitesse de déplacement des particules est.directionAngle = math.floor (math.random () * 360); .Defaultradrad ius + math. Particules dans l'axe x: this.speed * math. Particules this.border (); Instant suivant ce.y + = this.vector.y; Est-ce qu'ils atteignent tous la bordure si (this.x> = w || this.x <= 0) {// Si vous atteignez les limites gauche et droite, faites de la vitesse de l'axe x .vector.x * = -1;} if (this.y> = h || this.y <= 0) {// s'il atteint les limites supérieures et inférieures, la vitesse de l'axe y se transformera en le Numéro négatif d'origine Cet.Vector.Y * = -1; .x> W) {// Le fonctionnement du fait que la fenêtre du navigateur soit modifié est cachée. , afin qu'il puisse afficher ce.x = w;} if (this.y> h) {this.y = h;} if (this.x <0) {this.x = 0;} if (this.y <0) {this.y = 0;} this.Draw = function () {{{// La fonction des particules de dessin ctx.beginpath (); 0, math.pi * 2);Ce qui précède est tout le contenu de cet article.