Teilen Sie Beispiele für die Verwendung von HTML5 Canvas zum Erstellen von Tastatur- und Mausanimationen. HTML5-Tutorial-Fähigkeiten

Tastatur steuert die Bewegung des Balls

Wie wir alle wissen, handelt es sich bei der Animation, die wir sehen, tatsächlich um eine Reihe schneller Wechsel statischer Bilder, die dem bloßen Auge aufgrund visueller Nachbilder den visuellen Effekt von „bewegten Bildern“ verleihen. Nachdem Sie dies verstanden haben, wird das Zeichnen von Animationseffekten auf der Leinwand relativ einfach. Wir müssen zunächst nur eine bestimmte statische Grafik löschen und sie dann an einer anderen Stelle neu zeichnen. Wiederholen Sie diesen Vorgang, um die statische Grafik entlang einer bestimmten Flugbahn zu bewegen und einen Animationseffekt zu erzeugen.

Als nächstes zeichnen wir einen festen Ball auf die Leinwand und verwenden dann die Pfeiltasten auf der Tastatur, um die Bewegung des Balls zu steuern, um dynamische Effekte zu erzeugen. Der Beispielcode lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

4. "UTF-8">
"moveBall(event)"
7. >
"myCanvas"
9. width=
"400px"
10. height="300px" style="border: 1px solid red;"> Ihr Browser unterstützt das Canvas-Tag nicht.
13. >
14. //Holen Sie sich das Canvas-Objekt (Canvas)
15. var canvas = document.getElementById("myCanvas");
17. //Stellt die Klasse der Kugel dar
18. Funktion Ball(x, y, Radius, Geschwindigkeit){
19. this.x = x || 10;//Die x-Koordinate der Kugel, der Standardwert ist 10
this
20. .y = y || 10 //Die y-Koordinate der Kugel, der Standardwert ist 10
this
21. .radius = radius || //Der Radius der Kugel, der Standardwert ist 10
this
22. .speed = speed || 5; //Die Bewegungsgeschwindigkeit des Balls, der Standardwert ist 5  
//Nach oben verschieben
dies
25. .moveUp = Funktion(){
dieses
26. .y -= dieses.speed;  if
(
27. this.y //Überschreiten der Obergrenze verhindern
                                                                                                                                
28.                                                               };
 
29. //Nach rechts bewegen
30. dies
.moveRight =
31. Funktion
(){
33. this.x = this
.speed;
34. var maxX = canvas.width - this.radius;
35. if(this.x > maxX){
 
36. //Überschreitung der rechten Grenze verhindern  dieses
.x = maxX; 
37. }
38. };
39.  
40. //Nach links bewegen
41. dies.moveLeft = Funktion(){
42. dieses.x -= dieses.speed;
 
43. if(this.x //Überschreiten der linken Grenze verhindern
44.  this
.x =
45. this.radius;                                                                };
46.  
//Nach unten bewegen
49. dies.moveDown =
Funktion
50. (){ this.y =
this
51. .speed; var maxY = canvas.height - this
.radius;
52. if(this.y > maxY){
53. //Überschreitung der Untergrenze verhindern
dieses
54. .y = maxY>                                                               };
55. }
57. //Zeichne den Ball
59. Funktion drawBall(ball){
60.  if(
61. typeof ctx != "undefiniert"){
62. ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false); ctx.fill();
63. }
64. }
66. //Löschen Sie die Leinwand
67. Funktion clearCanvas(){
68.  if(typeof ctx != "undefiniert"){
69. ctx.clearRect(0, 0, 400, 300);
}
}
73. var ball = neu Ball();
//Erkennen Sie einfach, ob der aktuelle Browser das Canvas-Objekt unterstützt, um Syntaxfehler in einigen Browsern zu vermeiden, die HTML5 nicht unterstützen
if
75. (canvas.getContext){ 
//Erhalten Sie das entsprechende CanvasRenderingContext2D-Objekt (Pinsel)
var
77. ctx = canvas.getContext("2d"); drawBall(ball);
78. }
80. //Callback-Handler-Funktion für Onkeydown-Ereignis
81. //Steuern Sie die Bewegung des Balls entsprechend den Tasten des Benutzers
82. Funktion moveBall(event){
83. Schalter(event.keyCode){
84.  Fall 37: //Linke Pfeiltaste  
85. ball.moveLeft();
86. Pause;
 
87. Fall 38: //Richtungstaste nach oben  
ball.moveUp();
89. Pause;  
Fall
90. 39: //Rechtspfeiltaste   ball.moveRight();
Pause
92. ;  Fall
40: 
93. //Abwärtspfeiltaste ball.moveDown();
94. Pause
;
95.  Standard: 
//Andere Tastenoperationen reagieren nicht
96. zurück;
}
97.  
clearCanvas();
98. //Löschen Sie zuerst die Leinwand
drawBall(ball);
100. //Den neuesten Ball zeichnen
}
104. Bitte verwenden Sie einen Browser, der HTML5 unterstützt, um die folgende Webseite zu öffnen, um den tatsächlichen Effekt zu sehen (verwenden Sie die Pfeiltasten zum Bewegen):
Verwenden Sie die Leinwand, um einen beweglichen Ball zu zeichnen
105. .

Clown Smiley Face

Sie müssen nur ein paar APIs verstehen und dann die erforderlichen Animationsparameter verwenden, um diese interessante Webanimation zu erstellen, die auf Ihre Bewegungen reagieren kann.

Der erste Schritt besteht darin, die Gesichtszüge zu zeichnen
Dieser Clown hat keine Ohren und Augenbrauen, daher sind nur noch drei Organe übrig, aber wir müssen seine beiden Augen separat zeichnen, sodass es insgesamt vier Teile gibt. Schauen wir uns zunächst den Code an.

Code zum Zeichnen des linken Auges

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var leftEye = new Kinetic.Line({
2. x: 150,
3. Punkte: [0, 200, 50, 190, 100, 200, 50, 210],
4. Spannung: 0,5,
5. geschlossen: wahr,
6. Strich: 'weiß',
7. StrokeWidth: 10
8. });

Code zum Zeichnen des rechten Auges

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var rightEye = new Kinetic.Line({
2. x: sw - 250,
3. Punkte: [0, 200, 50, 190, 100, 200, 50, 210],
4. Spannung: 0,5,
5. geschlossen: wahr,
6. Strich: 'weiß',
7. StrokeWidth: 10
8. });

Code zum Zeichnen der Nase

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var Nase = neu Kinetic.Line({
2. Punkte: [240, 280, sw/2, 300, sw-240,280],
3. Spannung: 0,5,
4. geschlossen: wahr,
5. Strich: 'weiß',
6. StrokeWidth: 10
7. });

Code zum Zeichnen des Mundes

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. varmouth = new Kinetic.Line({
2. Punkte: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. Spannung: 0,5,
4. geschlossen: wahr,
5. Strich: 'rot',
6. StrokeWidth: 10
7. });

Würden Sie enttäuscht sein? Es stellt sich heraus, dass es nur ein paar Zeilen Code sind. Ja, so einfach ist das. Ich glaube, Sie beginnen, sich sicher zu fühlen, dass Sie ein Web-Game-Animationsprogrammierer werden können

Erklären Sie kurz den obigen Code. Kinetic ist das von uns verwendete JS-Toolkit. Am Kopf der Seite müssen wir wie folgt darauf verweisen:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. varmouth = new Kinetic.Line({
2. Punkte: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. Spannung: 0,5,
4. geschlossen: wahr,
5. Strich: 'rot',
6. StrokeWidth: 10
7. });

Die anderen sind mehrere wichtige Punkte, Linienelastizität, Farbe, Breite usw. Diese sind leicht zu verstehen.

Der zweite Schritt besteht darin, das Bild in Bewegung zu setzen

Der Grund, warum diese Animation attraktiv ist, liegt darin, dass sie auf Ihre Mausbewegungen reagieren und mit dem Benutzer interagieren kann. Dies ist der wichtigste Aspekt einer erfolgreichen Animation. Wenn Sie genau hinsehen, handelt es sich bei den Veränderungen in den Gesichtszügen des Clowns lediglich um Veränderungen der Form: Die Augen werden größer, der Mund wird größer und die Nase wird größer. Das Besondere ist jedoch, dass es sich bei dieser Veränderung nicht um eine sofortige Veränderung handelt Übergangsalgorithmen. Das ist der besorgniserregendste Teil. Glücklicherweise sind diese Algorithmustechnologien sehr ausgereift und erfordern nicht, dass wir darüber nachdenken. Diese Animations-Engine-Bibliotheken haben diese Technologien in sehr einfache und praktische Schnittstellen gekapselt. Werfen wir einen Blick darauf, wie wir die Dinge in Bewegung bringen können.

Animation des linken Auges

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var leftEyeTween = new Kinetic.Tween({
2. Knoten: leftEye,
3. Dauer: 1,
4. Lockerung: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. Punkte: [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Animation des rechten Auges

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var rightEyeTween = new Kinetic.Tween({
2. Knoten: rightEye,
3. Dauer: 1,
4. Lockerung: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. Punkte: [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Animation der Nase

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var NoseTween = new Kinetic.Tween({
2. Knoten: Nase,
3. Dauer: 1,
4. Lockerung: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. Punkte: [220, 280, sw/2, 200, sw-220,280]
7. });

Mundanimation

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. varmouthTween = new Kinetic.Tween({
2. Knoten: Mund,
3. Dauer: 1,
4. Lockerung: Kinetic.Easings.ElasticEaseOut,
5. Punkte: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
6. });

Der Code ist sehr einfach und die Variablennamen sind selbsterklärend. Für Programmierer mit ein wenig Erfahrung sollte es nicht schwierig sein, diese Codes zu verstehen. Grundsätzlich können Sie in jedem Codeabschnitt einige Punkte angeben, um den Abklingmodus und die Dauer der Animationsaktion festzulegen.

Vollständiger Animationscode

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. nbsp;HTML>   
2.   
3.      
4.     
5.       body {   
6.         margin: 0px;   
7.         padding: 0px;   
8.       }  
9.       #container {   
10.         background-color: black;   
11.       }   
12.        
13.      
14.      
15.     
    "container">
      
16.     <script><span class="string">"/js/lib/kinetic-v5.0.1.min.js"</script>>   
17.     <script><span class="string">"defer"</script>>   
18.       var sw = 578;   
19.       var sh = 400;   
20.       var stage = new Kinetic.Stage({   
21.         Container: 'Container',   
22.         Breite: 578,   
23.         Höhe: 400   
24.       });   
25.       var layer = new Kinetic.Layer({   
26.         y: -30    
27.       });   
28.   
29.       var leftEye = new Kinetic.Line({   
30.         x: 150,   
31.         Punkte: [0, 200, 50, 190, 100, 200, 50, 210],   
32.         Spannung: 0,5,   
33.         geschlossen: wahr,   
34.         Strich: 'weiß',   
35.         Strichbreite: 10        
36.       });   
37.   
38.       var rightEye = new Kinetic.Line({   
39.         x: sw - 250,   
40.         Punkte: [0, 200, 50, 190, 100, 200, 50, 210],   
41.         Spannung: 0,5,   
42.         geschlossen: wahr,   
43.         Strich: 'weiß',   
44.         Strichbreite: 10      
45.       });   
46.   
47.       var nose = neu Kinetic.Line({   
48.         Punkte: [240, 280, sw/2, 300, sw-240,280],   
49.         Spannung: 0,5,   
50.         geschlossen: wahr,   
51.         Strich: 'weiß',   
52.         Strichbreite: 10   
53.       });   
54.   
55.       var mouth = new Kinetic.Line({   
56.         Punkte: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   
57.         Spannung: 0,5,   
58.         geschlossen: wahr,   
59.         Strich: 'rot',   
60.         Strichbreite: 10   
61.       });   
62.   
63.       layer.add(leftEye)   
64.            .add(rightEye)   
65.            .add(nose)   
66.            .add(mouth);   
67.   
68.       stage.add(layer);   
69.   
70.       // Tweens   
71.   
72.       var leftEyeTween = new Kinetic.Tween({   
73.         node: leftEye,   
74.         Dauer: 1,   
75.         easing: Kinetic.Easings.ElasticEaseOut,   
76.         y: -100,   
77.         Punkte: [0, 200, 50, 150, 100, 200, 50, 200]   
78.       });    
79.   
80.       var rightEyeTween = new Kinetic.Tween({   
81.         node: rightEye,   
82.         Dauer: 1,   
83.         easing: Kinetic.Easings.ElasticEaseOut,   
84.         y: -100,   
85.         Punkte: [0, 200, 50, 150, 100, 200, 50, 200]   
86.       });   
87.   
88.       var noseTween = new Kinetic.Tween({   
89.         node: nase,   
90.         Dauer: 1,   
91.         easing: Kinetic.Easings.ElasticEaseOut,   
92.         y: -100,   
93.         Punkte: [220, 280, sw/2, 200, sw-220,280]   
94.       });    
95.   
96.       var mouthTween = new Kinetic.Tween({   
97.         Knoten: Mund,   
98.         Dauer: 1,   
99.         easing: Kinetic.Easings.ElasticEaseOut,   
100.         Punkte: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   
101.       });    
102.   
103.       stage.getContainer().addEventListener('mouseover', function() {   
104.         leftEyeTween.play();   
105.         rightEyeTween.play();   
106.         noseTween.play();   
107.         mouthTween.play();   
108.       });   
109.   
110.       stage.getContainer().addEventListener('mouseout', function() {   
111.         leftEyeTween.reverse();   
112.         rightEyeTween.reverse();   
113.         noseTween.reverse();   
114.         mouthTween.reverse();   
115.       });   
116.   
117.        
118.      
119.   

Regardez la démo