Partage d'exemples d'utilisation de HTML5 Canvas pour créer des animations de clavier et de souris_html5 compétences du didacticiel

Le clavier contrôle le mouvement du ballon

Comme nous le savons tous, l'animation que nous voyons est en fait une série de commutations rapides d'images statiques, ce qui donne à l'œil nu l'effet visuel d'« images en mouvement » dû aux images rémanentes visuelles. Après avoir compris cela, dessiner des effets d'animation sur la toile devient relativement simple. Il nous suffit d'abord d'effacer un certain graphique statique, puis de le redessiner à un autre endroit. Répétez cette opération pour faire bouger le graphique statique selon une certaine trajectoire afin de produire un effet d'animation.

Ensuite, nous dessinons une balle solide sur la toile, puis utilisons les touches fléchées du clavier pour contrôler le mouvement de la balle afin de produire des effets dynamiques. L'exemple de code est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

4. "UTF-8">
"moveBall(event)"
7. >
"myCanvas"
9. width=
"400px"
10. height="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.

Veuillez utiliser un navigateur prenant en charge HTML5 pour ouvrir la page Web suivante et voir l'effet réel (utilisez les touches fléchées pour vous déplacer) :
Utilisez la toile pour dessiner une balle mobile.

Clown Smiley Face
Il vous suffit de comprendre quelques API, puis d'utiliser les paramètres d'animation requis pour créer cette animation Web intéressante qui peut répondre à vos mouvements.
La première étape consiste à dessiner les traits du visage

Ce clown n'a ni oreilles ni sourcils, il ne reste donc que trois organes, mais nous devons dessiner ses deux yeux séparément, il y a donc quatre parties au total. Jetons d'abord un coup d'œil au code.

Code pour dessiner l'œil gauche

Code JavaScriptCopier le contenu dans le presse-papiers

1. var leftEye = nouveau Kinetic.Line({
2. x : 150,
3. points : [0, 200, 50, 190, 100, 200, 50, 210],
4. tension : 0,5,
5. fermé : vrai,
6. trait : 'blanc',
7. StrokeWidth : 10
8. });

Code pour dessiner l'oeil droit

Code JavaScriptCopier le contenu dans le presse-papiers

1. var rightEye = nouveau Kinetic.Line({
2. x : sw - 250,
3. points : [0, 200, 50, 190, 100, 200, 50, 210],
4. tension : 0,5,
5. fermé : vrai,
6. trait : 'blanc',
7. StrokeWidth : 10
8. });

Code pour dessiner le nez

Code JavaScriptCopier le contenu dans le presse-papiers

1. var nez = nouveau Kinetic.Line({
2. points : [240, 280, sw/2, 300, sw-240,280],
3. tension : 0,5,
4. fermé : vrai,
5. trait : 'blanc',
6. StrokeWidth : 10
7. });

Code pour dessiner la bouche

Code JavaScriptCopier le contenu dans le presse-papiers

1. var bouche = nouveau Kinetic.Line({
2. points : [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. tension : 0,5,
4. fermé : vrai,
5. trait : 'rouge',
6. StrokeWidth : 10
7. });

Seriez-vous déçu ? Il s’avère que ce ne sont que quelques lignes de code. Oui, c'est aussi simple que cela. Je pense que vous commencez à avoir confiance en votre capacité à devenir programmeur d'animation de jeux Web

 !

Expliquez brièvement le code ci-dessus. Kinetic est la boîte à outils js que nous utilisons. En tête de page, il faut le référencer comme ceci :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var bouche = nouveau Kinetic.Line({
2. points : [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. tension : 0,5,
4. fermé : vrai,
5. trait : 'rouge',
6. StrokeWidth : 10
7. });

Les autres sont plusieurs points clés, l'élasticité du trait, la couleur, la largeur, etc. Ceux-ci sont faciles à comprendre.

La deuxième étape consiste à faire bouger l'image

La raison pour laquelle cette animation est attrayante est qu'elle peut répondre aux mouvements de votre souris et interagir avec l'utilisateur. C'est l'aspect le plus critique d'une animation réussie. Si vous observez attentivement, les changements dans les traits du visage du clown ne sont que des changements de forme. Les yeux deviennent plus grands, la bouche devient plus grande et le nez devient plus grand. Mais la particularité est que ce changement n'est pas un changement instantané, mais un changement. celui de transition. Il contient des algorithmes. C'est la partie la plus inquiétante. Heureusement, ces technologies algorithmiques sont très matures et ne nécessitent pas que nous y réfléchissions. Ces bibliothèques de moteurs d’animation ont encapsulé ces technologies dans des interfaces très simples et pratiques. Voyons comment faire bouger les choses.

Animation de l'œil gauche

Code JavaScriptCopier le contenu dans le presse-papiers

1. var leftEyeTween = nouveau Kinetic.Tween({
2. nœud : leftEye,
3. durée : 1,
4. assouplissement : Kinetic.Easings.ElasticEaseOut,
5. y : -100,
6. points : [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Animation oeil droit

Code JavaScriptCopier le contenu dans le presse-papiers

1. var rightEyeTween = nouveau Kinetic.Tween({
2. nœud : rightEye,
3. durée : 1,
4. assouplissement : Kinetic.Easings.ElasticEaseOut,
5. y : -100,
6. points : [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Animation du nez

Code JavaScriptCopier le contenu dans le presse-papiers

1. var noseTween = nouveau Kinetic.Tween({
2. noeud : nez,
3. durée : 1,
4. assouplissement : Kinetic.Easings.ElasticEaseOut,
5. y : -100,
6. points : [220, 280, sw/2, 200, sw-220,280]
7. });

Animation de la bouche

Code JavaScriptCopier le contenu dans le presse-papiers

1. varmouthTween = nouveau Kinetic.Tween({
2. nœud : bouche,
3. durée : 1,
4. assouplissement : Kinetic.Easings.ElasticEaseOut,
5. points : [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
6. });

Le code est très simple et les noms des variables sont explicites. Il ne devrait pas être difficile pour les programmeurs ayant un peu d’expérience de comprendre ces codes. Fondamentalement, chaque morceau de code vous permet de fournir quelques points pour spécifier le mode de désintégration et la durée de l'action d'animation.

Code d'animation complet

Code JavaScriptCopier le contenu dans le presse-papiers

1.   
2.   
3.      
4.        
5.      
6.      
7.     
   "container">
     
8.     "/js/lib/kinetic-v5.0.1.min.js">   
9.     "différer">   
10.       var sw = 578 ;   
11.       var sh = 400 ;   
12.       var stage = nouveau Kinetic.Stage({   
13.         conteneur : 'conteneur',   
14.         largeur : 578,   
15.         hauteur : 400   
16.       });   
17.       var layer = nouveau Kinetic.Layer({   
18.         y : -30    
19.       });   
20.   
21.       var leftEye = nouveau Kinetic.Line({   
22.         x : 150,   
23.         points : [0, 200, 50, 190, 100, 200,  50, 210],   
24.         tension : 0,5,   
25.         fermé : vrai,   
26.         coup : 'blanc',   
27.         StrokeWidth : 10        
28.       });   
29.   
30.       var rightEye = nouveau Kinetic.Line({   
31.         x : sw - 250,   
32.         points : [0, 200, 50, 190, 100, 200,  50, 210],   
33.         tension : 0,5,   
34.         fermé : vrai,   
35.         coup : 'blanc',   
36.         StrokeWidth : 10      
37.       });   
38.   
39.       var nez = nouveau Kinetic.Line({   
40.         points : [240, 280, sw/2, 300,  sw-240,280],   
41.         tension : 0,5,   
42.         fermé : vrai,   
43.         coup : 'blanc',   
44.         StrokeWidth : 10   
45.       });   
46.   
47.       var bouche = nouveau Kinetic.Line({   
48.         points : [150, 340, sw/2, 380, sw - 150, 340,  sw/2, sh],   
49.         tension : 0,5,   
50.         fermé : vrai,   
51.         coup : 'rouge',   
52.         StrokeWidth : 10   
53.       });   
54.   
55.       layer.add(leftEye)   
56.            .add(rightEye)   
57.            .add(nez)   
58.            .add(bouche);   
59.   
60.       stage.add(layer);   
61.   
62.       // préadolescents   
63.   
64.       var leftEyeTween = nouveau Kinetic.Tween({   
65.         nœud : leftEye,   
66.         durée : 1,   
67.         assouplissement : Kinetic.Easings.ElasticEaseOut,   
68.         y : -100,   
69.         points : [0, 200, 50, 150, 100, 200, 50, 200]   
70.       });    
71.   
72.       var rightEyeTween = nouveau Kinetic.Tween({   
73.         nœud : rightEye,   
74.         durée : 1,   
75.         assouplissement : Kinetic.Easings.ElasticEaseOut,   
76.         y : -100,   
77.         points : [0, 200, 50, 150, 100, 200, 50, 200]   
78.       });   
79.   
80.       var noseTween = nouveau Kinetic.Tween({   
81.         nœud : nez,   
82.         durée : 1,   
83.         assouplissement : Kinetic.Easings.ElasticEaseOut,   
84.         y : -100,   
85.         points : [220, 280, sw/2, 200, sw-220,280]   
86.       });    
87.   
88.       var mouthTween = nouveau Kinetic.Tween({   
89.         nœud : bouche,   
90.         durée : 1,   
91.         assouplissement : Kinetic.Easings.ElasticEaseOut,   
92.         points : [100, 250, sw/2, 250, sw - 100, 250,  sw/2, sh-20]   
93.       });    
94.   
95.       stage.getContainer().addEventListener('mouseover', function() {   
96.         leftEyeTween.play();   
97.         rightEyeTween.play();   
98.         noseTween.play();   
99.         mouthTween.play();   
100.       });   
101.   
102.       stage.getContainer().addEventListener('mouseout', function() {   
103.         leftEyeTween.reverse();   
104.         rightEyeTween.reverse();   
105.         noseTween.reverse();   
106.         mouthTween.reverse();   
107.       });   
108.   
109.        
110.      
111.   

觀看示範