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.
16. 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
17. .

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.   
2.   
3.      
4.        
5.      
6.      
7.     
   "container">
     
8.     "/js/lib/kinetic-v5.0.1.min.js">   
9.     "defer">   
10.       var sw = 578;   
11.       var sh = 400;   
12.       var stage = new Kinetic.Stage({   
13.         Container: 'Container',   
14.         Breite: 578,   
15.         Höhe: 400   
16.       });   
17.       var layer = new Kinetic.Layer({   
18.         y: -30    
19.       });   
20.   
21.       var leftEye = new Kinetic.Line({   
22.         x: 150,   
23.         Punkte: [0, 200, 50, 190, 100, 200, 50, 210],   
24.         Spannung: 0,5,   
25.         geschlossen: wahr,   
26.         Strich: 'weiß',   
27.         Strichbreite: 10        
28.       });   
29.   
30.       var rightEye = new Kinetic.Line({   
31.         x: sw - 250,   
32.         Punkte: [0, 200, 50, 190, 100, 200, 50, 210],   
33.         Spannung: 0,5,   
34.         geschlossen: wahr,   
35.         Strich: 'weiß',   
36.         Strichbreite: 10      
37.       });   
38.   
39.       var nose = neu Kinetic.Line({   
40.         Punkte: [240, 280, sw/2, 300, sw-240,280],   
41.         Spannung: 0,5,   
42.         geschlossen: wahr,   
43.         Strich: 'weiß',   
44.         Strichbreite: 10   
45.       });   
46.   
47.       var mouth = new Kinetic.Line({   
48.         Punkte: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   
49.         Spannung: 0,5,   
50.         geschlossen: wahr,   
51.         Strich: 'rot',   
52.         Strichbreite: 10   
53.       });   
54.   
55.       layer.add(leftEye)   
56.            .add(rightEye)   
57.            .add(nose)   
58.            .add(mouth);   
59.   
60.       stage.add(layer);   
61.   
62.       // Tweens   
63.   
64.       var leftEyeTween = new Kinetic.Tween({   
65.         node: leftEye,   
66.         Dauer: 1,   
67.         easing: Kinetic.Easings.ElasticEaseOut,   
68.         y: -100,   
69.         Punkte: [0, 200, 50, 150, 100, 200, 50, 200]   
70.       });    
71.   
72.       var rightEyeTween = new Kinetic.Tween({   
73.         node: rightEye,   
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 noseTween = new Kinetic.Tween({   
81.         node: nase,   
82.         Dauer: 1,   
83.         easing: Kinetic.Easings.ElasticEaseOut,   
84.         y: -100,   
85.         Punkte: [220, 280, sw/2, 200, sw-220,280]   
86.       });    
87.   
88.       var mouthTween = new Kinetic.Tween({   
89.         Knoten: Mund,   
90.         Dauer: 1,   
91.         easing: Kinetic.Easings.ElasticEaseOut,   
92.         Punkte: [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.   

Regardez la démo