Beispielcode zum Implementieren von Animationseffekten für Gashapon-Maschinen mithilfe von Canvas

Im Handumdrehen bin ich seit zwei Monaten Praktikant. Die Aufgabe dieses Monats besteht darin, eine Gashapon-Automaten-Lotterieveranstaltung durchzuführen. Es gibt Schnittstellen für Daten und so weiter Links am Frontend? Die größte Aufgabe bestand lediglich darin, die Animation der Gashapon-Maschine zu realisieren.

Ich war aufgeregt, eine Gashapon-Maschinenanimation aus dem Internet zu finden, aber ich stellte fest, dass sie CSS-Animationen direkt zum Schreiben der Gashapon-To-Death-Animation verwendete, also entschied ich mich für die Verwendung von Canvas zum Zeichnen zufällige Animation des Gashapons. Zuerst habe ich eine einfache Gashapon-Maschinen-Demo geschrieben und den Effekt in der Vorschau angezeigt.

Das Layout der Gashapon-Maschine ist relativ einfach. Sie müssen nur einige Elemente zum Grundhintergrund hinzufügen. Alles andere spielt keine Rolle.

 <div class=bg> <span id=message>Zum Zeichnen klicken</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png class =lighting/> </div></div><img src=img/start-btn.png id=start onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

Angehängtes Stylesheet:

 body {margin: 0;padding: 0;border: none;}.bg {background: url(../img/bg.png) top no-repeat;background-size: 100%;overflow: versteckt;position: absolut ;width: 400px;height: 100%;margin-top: 0;margin-left: 50%;-webkit-transform: übersetzen(-50 %);-moz-transform: übersetzen(-50 %);-ms-transform: übersetzen(-50 %);-o-transform: übersetzen(-50 %);transform: übersetzen(-50 % );}#message {position: absolute;text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50 %;-webkit-transform: Translate(-50 %);-moz-transform: Translate(-50 %);-ms-transform: Translate(-50 %);-o-transform: Translate(-50 %) ;transform: Translate(-50%);}.lotterybg {background: url(../img/lotterybg.png) top no-repeat;background-size: 100 %;Überlauf: sichtbar;Breite: 80 %;Höhe: 100 %;Rand oben: 160 Pixel;Rand links: 50 %;-webkit-transform: Translate(-50 %);-moz-transform: Translate(- 50 %);-ms-transform: Translate(-50 %);-o-transform: Translate(-50 %);transform: translator(-50 %);}#myCanvas {position: absolute;border: none;width: 285px;height: 170px;margin-top: 15px;margin-left: 50%;-webkit-transform: Translate(-50% );-moz-transform: übersetzen(-50 %);-ms-transform: übersetzen(-50 %);-o-transform: Translate(-50%);transform: Translate(-50%);}.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}#start {position: absolute ;z-index: 3;width: 202px;margin-top: 413px;margin-left: 50%;-webkit-transform: übersetzen(-50 %);-moz-transform: übersetzen(-50 %);-ms-transform: übersetzen(-50 %);-o-transform: übersetzen(-50 %);transform: übersetzen(-50 % );}.imgSrc {display: none;position: absolute;}.award {position: absolute;border: none;width: 60px;height: 200px;top: 470px;margin-left: 50%;-webkit-transform: Translate(-50%);-moz-transform: Translate(-50%);-ms-transform: Translate(-50%);-o-transform: übersetzen(-50 %);transformieren: übersetzen(-50 %);}

Auf diese Weise ist das Layout fertiggestellt und die nächste Hauptarbeit besteht darin, das Bild auf die Leinwand zu zeichnen.

Definieren Sie zunächst die verschiedenen Variablen:

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Bildobjekt var ball2 = document.getElementById('ball2' );//Bildobjekt var ball3 = document.getElementById('ball3');//Bildobjekt var ball4 = document.getElementById('ball4');//Bildobjekt var ballList = [ball1, ball2, ball3, ball4];//Bildobjektarray var ballNum = 4;//Die Anzahl der Bälle in der Gashapon-Maschine var awardList = [ ];//Die Sammlung kleiner Bälle in der Gashapon-Maschine var timer;//Timer var award = document.getElementById('awardBall'); document.getElementById('message');

Jeder Gashapon in der Gashapon-Maschine ist ein Objekt, daher müssen Sie ein Gashapon-Objekt definieren:

 function Ball(index, img) { this.r = 30;//Der Radius des Balls this.x = this.rand(canvas.width - this.r * 2);//Die anfängliche Abszisse des Balls this. y = this .rand(canvas.height - this.r * 2);//Die anfängliche vertikale Koordinate des Balls this.color = index;//Die Farbe des Balls, dargestellt durch den Index this.img = img; //Das Ballmaterial macht { this .speedX = this.rand(20) - 10; } while (this.speedX < 5);//Die Abszisse des Balls ändert die Geschwindigkeit do { this.speedY = this.rand(20) - 10 } while (this.speedY < 5 );//Die vertikale Koordinate des Balls ändert die Geschwindigkeit}

Der Wertindex des eingehenden Gashapon-Objekts ist die Farbe des Balls, dargestellt durch die Zahlen 1 bis 4, und img ist das Bildobjekt, das zum Zeichnen des Gashapons verwendet wird.

Im vorherigen Schritt wurden dem Gashapon Attribute hinzugefügt. Der nächste Schritt besteht darin, dem Gashapon Methoden hinzuzufügen:

 Ball.prototype = { rand: function (num) {//Random number return Math.random() * num }, run: function () {//Ball motion function this.x += this.speedX; += this.speedY; if (this.x > canvas.width - this.r * 2) {//Der Ball trifft die rechte Grenze, die Abszissengeschwindigkeit wird negativ this.speedX = -this.speedX } if (this .X < 0) {//Der Ball trifft die linke Grenze und die Abszissengeschwindigkeit wird positiv this.speedX = Math.abs(this.speedX } if (this.y > canvas.height - this.r * 2) { //Wenn der Ball die untere Grenze trifft, wird die Ordinatengeschwindigkeit negativ this.speedY = -this.speedY } if (this.y < 0) {//Wenn der Ball die obere Grenze trifft, wird die Ordinatengeschwindigkeit positiv this .speedY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//Den Ball zeichnen}}

Der Hauptzweck besteht darin, dem Prototyp des Gashapon-Objekts eine Bewegungsfunktion hinzuzufügen. Die Funktion der Bewegungsfunktion besteht darin, das Gashapon entsprechend seiner Geschwindigkeit zu bewegen und abzuprallen, wenn es die Grenze berührt.

Der nächste Schritt besteht darin, den Gashapon in die Gashapon-Maschine zu geben:

 function init() {//Initialisierung für (let i = 0; i < ballNum; i++) {//Erzeuge zufällig Bälle verschiedener Farben let index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);//Neues Ballobjekt} window.clearInterval(timer);//Timer löschen timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Löschen Sie die Leinwand für (let i = 0; i < awardList.length; i++) { awardList[i].run( }//Machen Sie den Ball in Bewegung}, 15) ; }

Auf diese Weise befinden sich bereits kleine Kugeln in der Gashapon-Maschine.

Der Hauptvorgang zum Starten des Gashapons besteht darin, auf die Schaltfläche zu klicken. Die Gashapon-Maschine reduziert die Anzahl der Gashapon-Eier und erhält die entsprechenden Gashapon-Eier.

 function play() { if (awardList === 0) {//There is no ball in the award pool warning('Start again!'); message.innerText = 'Click to draw'; else { window. clearInterval(timer);//Löschen Sie den Timer let r = awardList.pop();//Reduzieren Sie die Bälle im Prämienpool timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Löschen Sie die Leinwand für (let i = 0; i < awardList.length; i++) { awardList[i].run( }//Machen Sie den Ball in Bewegung}, 15) ; switch (r.color) {//Ball-Drop-Animation case 0: award.setAttribute('class', 'dropBall1'); 'dropBall2'); break; case 2: award.setAttribute('class', 'dropBall3'); //Der Gashapon ist erfolgreich und fordert award.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball!' 1: message.innerText = 'Grüner Ball!'; case 2: message.innerText = 'Red ball!'

Die fallende Animation des Gashapons wird hier mithilfe der Schlüsselbilder der CSS-Animation vervollständigt:

 .dropBall1 {content: ;position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/1.png) no-repeat;background-size : include;animation: Drop 1s Easy-Out Forwards; -webkit-animation: Drop 1s Easy-Out Forwards;}.dropBall2 {Inhalt: ;Position: absolut;links: 0;oben: 0;Breite: 60px;Höhe: 60px;Anzeige: Block;Hintergrund: url(../img/2.png) no-repeat;Hintergrundgröße: enthalten ;animation: 1 Sekunde nach vorne fallen lassen;-webkit-animation: 1 Sekunde nach vorne fallen lassen;}.dropBall3 {content: ;position: absolut;links: 0;oben: 0;Breite: 60px;Höhe: 60px;Anzeige: Block;Hintergrund: URL(../img/3.png) no-repeat;Hintergrundgröße: enthalten;Animation: Drop 1s Leichtigkeit -out Forwards;-webkit-animation: Drop 1s Easy-Out Forwards;}.dropBall4 {content: ;position: absolute;left: 0;oben: 0;Breite: 60px;Höhe: 60px;Anzeige: Block;Hintergrund: url(../img/4.png) no-repeat;Hintergrundgröße: enthalten;Animation: 1 Sekunde nach vorne fallen lassen; -webkit-animation: 1 Sekunde nach vorne fallen lassen;}@keyframes drop { 0% { transform: scale(0.7 }) 50 % { transform: scale(1); } 100 % { transform: translatorY(100px }}@-webkit-keyframes drop { 0 % { -webkit-transform: scale (0,7); } 50 % { -webkit-transform: scale(1); 51 % { -webkit-transform: TranslateY(0px); } 100% { -webkit-transform: TranslateY(100px);

Natürlich müssen Sie am Ende init(); hinzufügen, um die Gashapon-Maschine zum Laufen zu bringen. An diesem Punkt ist diese einfache Gashapon-Maschine fertig und der Effekt wird in der Vorschau angezeigt.

Obwohl diese Demo relativ einfach ist, gibt es dennoch einige Punkte zu beachten und einige Bereiche, die optimiert werden können.

Notiz

img-Objekt

Diese IMG-Tags in HTML:

 <img src=img/1.png id=ball1 class=imgSrc><img src=img/2.png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

Der Stil wird auch als display: none; geschrieben. Dies wird geschrieben, um das img-Objekt in js zu erhalten. Natürlich können Sie diese img-Tags auch direkt in die js-Datei schreiben, ohne sie in HTML zu schreiben:

 var img = new Image(); img.src = 'img/1.png';

Auf diese Weise erhalten Sie auch das IMG-Objekt und können es auch zum Zeichnen von Gashapon verwenden.

Der Timer wird im Code gelöscht, bevor der Timer aufgerufen wird. Der Zweck besteht darin, dass der Timer weiterzählt, wenn der Timer nicht gelöscht wird, was dazu führt, dass die Animation immer seltsamer wird.

Beim Zeichnen auf der Leinwand ist das Bild möglicherweise unklar oder vergrößert. Diese Situation kann gelöst werden, indem die Breiten- und Höhenattribute des Canvas-Tags auf die gleichen Breiten- und Höhenattribute des Stils eingestellt werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.