Tutoriel sur l'utilisation de Canvas en HTML5 combiné avec des formules pour dessiner des compétences de didacticiel motion_html5 de particules

Récemment, je souhaite créer une page Web et mettre certaines des DÉMO que j'ai créées pendant le processus d'apprentissage du HTML5 pour créer une collection. Cependant, ce serait trop moche de simplement créer une page Web et d'organiser toutes les DÉMO une seule. par un. Je pensais juste que, puisque j'ai appris Canvas, jouons avec le navigateur et réalisons une petite animation d'ouverture.

Après avoir réfléchi un moment à l'effet de l'animation d'ouverture, j'ai décidé d'utiliser des particules parce que je pense que les particules sont plus amusantes. Je me souviens encore que le premier article de blog technique que j'ai écrit concernait la particule de texte et d'images : Particuler du texte et des images À cette époque, je ne faisais que du mouvement linéaire et j'ajoutais un petit effet 3D. La formule de l'exercice est simple. Je voulais donc juste rendre cette animation d'ouverture plus dynamique.

Allez d'abord à la DÉMO : http://2.axescanvas.sinaapp.com/demoHome/index.html

L'effet est-il plus dynamique qu'un mouvement linéaire ? Et c’est très simple, n’oubliez pas le titre de cet article, une petite formule, un grand plaisir. Pour obtenir un tel effet, tout ce dont nous avons besoin est notre lycée. . Ou les connaissances en physique au lycée, les formules de mouvement accéléré et de mouvement décéléré. C'est donc vraiment la formule des petites gouttes. L'affiche originale aime jouer avec des choses sympas. Bien qu'il ne les utilise pas au travail, le plaisir est vraiment fascinant. De plus, cela peut également renforcer vos capacités de réflexion en programmation.

Sans plus attendre, venons-en au sujet. Laissez-moi vous expliquer brièvement le principe~~~

Le code de base du mouvement des particules est exactement le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. mise à jour :fonction(heure){   
2.             this.x  = this.vx*time;   
3.             this.y  = this.vy*time;   
4.     
5.             if(!this.globleDown&&this.y>0){   
6.                 var yc = ce.toy - this.y;   
7.                 var xc = this.tox - this.x;   
8.     
9.                 this.jl = Math.sqrt(xc*xc yc*yc);   
10.     
11.                 var za = 20;   
12.     
13.                 var ax = za*(xc/this.jl),   
14.                     ay = za*(yc/this.jl),   
15.                     vx = (this.vx ax*time)*0.97,   
16.                     vy = (this.vy ay*time)*0,97 ;   
17.     
18.                 this.vx = vx;   
19.                 this.vy = vy;   
20.     
21.              }autre {   
22.                 var gravité = 9.8;   
23.                 var vy = ce.vy gravité*temps ;   
24.     
25.                 if(this.y>canvas.height){   
26.                     vy = -vy*0.7;   
27.                 }
29.  this.vy = vy
30.                                                                 
},

Les particules ont un total de deux états, l'un est en chute libre et l'autre est en aspiration. Sans parler de la chute libre. Avant de parler d'aspiration, postons les propriétés des particules :

Code JavaScript

Copier le contenu dans le presse-papiers

1. var Dot = fonction(x,y,vx,vy,tox,toy,color){
 
2. ce.x=x; 
3. ce.y=y
 
4. ce.vx=vx; 
 
5. ce.vy=vy; 
6. ce.nextox = tox
7. ce.nextoy = jouet
 
8. ce.color = couleur
9. ce.visible = vrai ;
10. ce.globleDown = faux ;
11. this.setEnd(tox, jouet );
}
setEnd :
14. fonction(tox, jouet){
                                                                           
15.                                                                                                                                                                                                                                                .y
                                                                                      .x
16. },

17. x et y sont les positions des particules, vx est la vitesse horizontale des particules et vy est la vitesse verticale des particules. Peu importe que vous connaissiez nexttox ou autre, ce ne sont que des variables temporaires. . tox et toy sont les emplacements de destination des particules.

    Tout d’abord, donnez à toutes les particules une destination, qui sera discutée ci-dessous. C'est-à-dire que vous voulez que la particule atteigne l'endroit, puis définissez une variable za comme accélération. Si vous voulez connaître la valeur spécifique, vous obtiendrez les paramètres approximatifs grâce à d'autres tests, je la règle sur 20. c'est à peu près la même chose. za est l'accélération de la ligne entre la particule et la destination. Par conséquent, nous pouvons calculer l'accélération horizontale et l'accélération verticale de la particule à travers la position de la particule et la position de la destination grâce à des fonctions trigonométriques simples.
    
    

    Code JavaScriptCopier le contenu dans le presse-papiers

    1. var ax = za*(xc/this.jl),
    2. ay = za*(yc/this.jl),
    Après avoir eu l'accélération horizontale et l'accélération verticale, l'étape suivante est encore plus simple. Calculez directement l'incrément de vitesse horizontale et de vitesse verticale, modifiant ainsi les valeurs de vitesse horizontale et de vitesse verticale

    
    
    

    Code XML/HTMLCopier le contenu dans le presse-papiers

    1. vx = (this.vx ax*time)*0,97,
    2. vy = (this.vy ay*time)*0,97;

    La raison pour laquelle il est multiplié par 0,97 est de simuler une perte d'énergie afin que les particules ralentissent. le temps est la différence de temps entre chaque image
    Après avoir calculé la vitesse, mettez simplement à jour la position des particules.

    
    
    

    Code XML/HTML
    Copier le contenu dans le presse-papiers

    this.x = this.vx*heure
    1. this.y = this.vy*time

    Étant donné que la direction de la connexion entre la particule et la destination change constamment pendant le vol, l'accélération horizontale et l'accélération verticale de la particule doivent être recalculées à chaque image.
    C’est le principe du mouvement, n’est-ce pas très simple ?
    Maintenant que nous avons parlé du principe du mouvement, parlons de la mise en œuvre spécifique de l'animation ci-dessus : initialisation de l'animation, dessinez les mots ou les images souhaités sur une toile hors écran, puis obtenez les pixels du hors-écran. canevas d'écran via la méthode getImageData. Utilisez ensuite une boucle pour trouver la zone dessinée dans le canevas hors écran. Étant donné que la valeur des données dans imageData est un tableau rgba, nous jugeons que la dernière valeur, c'est-à-dire que la transparence est supérieure à 128, signifie que la zone a été. dessiné. Obtenez ensuite la valeur xy de la zone Afin d'éviter qu'un trop grand nombre d'objets particules ne provoquent un décalage de page, nous limitons le nombre de particules, la valeur x et la valeur y augmentent de 2 à chaque fois, réduisant ainsi le nombre de pixels. particules.

    
    
    

    Code XML/HTML
    Copier le contenu dans le presse-papiers

    1. this.osCanvas = document.createElement("canvas");   
    2.         var osCtx = this.osCanvas.getContext("2d");   
    3.     
    4.         this.osCanvas.width = 1000;   
    5.         this.osCanvas.height = 150;   
    6.     
    7.         osCtx.textAlign = "centre";   
    8.         osCtx.textBaseline = "milieu";   
    9.         osCtx.font="70px 微软雅黑,黑体 bold";   
    10.         osCtx.fillStyle = "#1D181F"  
    11.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40);   
    12.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2 40);   
    13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas .hauteur);   
    14.     
    15.         points = [];   
    16.     
    17.         pour(var x=0;x<bigImageData.width;x =2){   
    18.             pour(var y=0;y<bigImageData.height;y =2){   
    19.                 var i = (y*bigImageData.width   x)*4;   
    20.                 if(bigImageData.data[i 3]>128){   
    21.                     var dot = nouveau Dot(   
    22.                         Math.random()>0.5?Math.random()*20 10:Math.random()*20 canvas.width-40,   
    23.                         -Math.random()*canvas.height*2,   
    24.                         0,   
    25.                         0,   
    26.                         x (canvas.width/2-this.osCanvas.width/2),   
    27.                         y (canvas.height/2-this.osCanvas.height/2),   
    28.                         "rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)"   
    29.                     );   
    30.                     dot.setEnd(canvas.width/2,canvas.height/2)   
    31.                     dots.push(dot);   
    32.                 }   
    33.              }   
    34.         }   

    通过循环获取到粒子的位置xy值后，把位置赋给粒子，成为粒子的目的地。然后动画开始，就可以做出文字图片粒子化的效果了。