En un clin d'œil, je suis stagiaire depuis deux mois. L'entreprise organise une journée d'adhésion chaque mois. La tâche de ce mois-ci est d'organiser un événement de loterie de machines gashapon. Il y a des interfaces pour les données, etc. laissé sur le front-end ? La plus grande tâche était simplement de réaliser l'animation de la machine gashapon.
arrière-planJ'étais ravi de trouver une animation de machine gashapon sur Internet, mais j'ai découvert qu'elle utilisait directement l'animation CSS pour écrire l'animation du gashapon à mort. Je ne l'aimais pas beaucoup, j'ai donc choisi d'utiliser un canevas pour dessiner le. animation aléatoire du gashapon. J’ai d’abord écrit une simple démo de machine gashapon et prévisualisé l’effet.
commencer mise en pageLa disposition de la machine gashapon est relativement simple. Il vous suffit d'ajouter quelques éléments à l'arrière-plan de base. Le plus important est la balise canvas. Tout le reste n'a pas d'importance :
<div class=bg> <span id=message>Cliquez pour dessiner</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png class =éclairage/> </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>
Feuille de style ci-jointe :
body {marge : 0 ; remplissage : 0 ; bordure : aucune ;}.bg {arrière-plan : url (../img/bg.png) top sans répétition ; taille de l'arrière-plan : 100 % ; débordement : caché ; position : absolue ;largeur : 400 px ;hauteur : 100 %;marge supérieure : 0 ;marge gauche : 50 % ;-webkit-transform : traduire(-50%) ;-moz-transform : traduire(-50 %);-ms-transform : traduire(-50 %);-o-transform : traduire(-50 %);transformer : traduire(-50 % );}#message {position : absolue ;text-align : center;height : 25px;font-size : 22px;margin-top : 110px;margin-left : 50 % ;-webkit-transform : traduire (-50 %) ; ;transform: traduire(-50%);}.lotterybg {background: url(../img/lotterybg.png) top no-repeat;background-size: 100 % ;débordement : visible ;largeur : 80 %;hauteur : 100 %;marge supérieure : 160 px;marge gauche : 50 %;-webkit-transform : traduire(-50 %);-moz-transform : traduire(- 50 % );-ms-transform : traduire (-50 %);-o-transform : traduire (-50 %);transformer : traduire(-50%);}#myCanvas {position : absolue;bordure : aucune;largeur : 285 px;hauteur : 170 px;marge supérieure : 15 px;marge gauche : 50 %;-webkit-transform : traduire(-50 % );-moz-transform : traduire (-50 %);-ms-transform : traduire (-50 %);-o-transform : traduire (-50 %);transformer : traduire(-50 %);}.lighting {affichage : bloc ; largeur maximale : 99 % ; marge supérieure : 0; marge gauche : 0 ;}#start {position : absolue ;z-index : 3;largeur : 202px;marge supérieure : 413px;marge gauche : 50 %;-webkit-transform : traduire(-50%) ;-moz-transform : traduire(-50 %);-ms-transform : traduire(-50 %);-o-transform : traduire(-50 %);transformer : traduire(-50 % );}.imgSrc {affichage : aucun;position : absolue;}.award {position : absolue;bordure : aucun;largeur : 60 px;hauteur : 200 px;haut : 470px;marge gauche : 50 % ;-webkit-transform : traduire(-50 %);-moz-transform : traduire(-50 %);-ms-transform : traduire(-50 %);-o-transform : traduire(-50%);transformer: traduire(-50%);}
De cette façon, la mise en page est terminée et le prochain travail principal consiste à dessiner l'image sur la toile.
Animation GachaDéfinissez d’abord les différentes variables :
var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Objet image var ball2 = document.getElementById('ball2' );//Objet image var ball3 = document.getElementById('ball3');//Objet image var ball4 = document.getElementById('ball4');//Objet image var ballList = [ball1, ball2, ball3, ball4];//Tableau d'objets image var ballNum = 4;//Le nombre de balles dans la machine gashapon var awardsList = [ ];//La collection de petites boules dans la machine gashapon var timer;//Timer var Award = document.getElementById('awardBall'); document.getElementById('message');Objet Gacha
Chaque gashapon de la machine gashapon est un objet, vous devez donc définir un objet gashapon :
function Ball(index, img) { this.r = 30;//Le rayon de la balle this.x = this.rand(canvas.width - this.r * 2);//L'abscisse initiale de la balle this. y = this .rand(canvas.height - this.r * 2);//La coordonnée verticale initiale de la balle this.color = index;//La couleur de la balle, représentée par l'indice this.img = img; //Le matériau de la balle fait { this .speedX = this.rand(20) - 10; } while (this.speedX < 5);//L'abscisse de la balle change de vitesse do { this.speedY = this.rand(20) - 10; );//La coordonnée verticale de la balle change de vitesse}
L'indice de valeur de l'objet gashapon entrant est la couleur de la balle, représentée par les chiffres de 1 à 4, et img est l'objet image utilisé pour dessiner le gashapon.
Méthode GachaÀ l'étape précédente, des attributs ont été ajoutés au gashapon. L'étape suivante consiste à ajouter des méthodes au gashapon :
Ball.prototype = { rand: function (num) {//Random number return Math.random() * num }, run: function () {//Ball motion function this.x += this.speedX this; += this.speedY; if (this.x > canvas.width - this.r * 2) {//La balle touche la limite droite, la vitesse en abscisse devient négative this.speedX = -this.speedX } if (this.speedY; .x < 0) {//La balle touche la limite gauche et la vitesse en abscisse devient positive this.speedX = Math.abs(this.speedX); } if (this.y > canvas.height - this.r * 2) { //Lorsque la balle atteint la limite inférieure, la vitesse ordonnée devient négative this.speedY = -this.speedY; } if (this.y < 0) {//Lorsque la balle atteint la limite supérieure, la vitesse ordonnée devient positive this. .vitesseY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//Dessine la balle}}
L'objectif principal est d'ajouter une fonction de mouvement au prototype de l'objet gashapon. La fonction de mouvement est de faire bouger le gashapon en fonction de sa vitesse et de rebondir lorsqu'il touche la limite.
initialisationL'étape suivante consiste à mettre le gashapon dans la machine à gashapon :
function init() {//Initialisation pour (let i = 0; i < ballNum; i++) {//Générer aléatoirement des boules de différentes couleurs let index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);//Nouvel objet balle} window.clearInterval(timer);//Effacer la minuterie timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Effacer le canevas pour (let i = 0; i < awardsList.length; i++) { awardsList[i].run( }//Faire bouger la balle}, 15) ; }
De cette façon, il y a déjà des petites boules dans la machine gashapon.
Commencer GachaLe processus principal de démarrage du gashapon est de cliquer sur le bouton. La machine à gashapon réduira le nombre d'œufs de gashapon et obtiendra les œufs de gashapon correspondants. L'affichage gagnant sera :
function play() { if (awardList.length === 0) {//Il n'y a pas de balle dans la cagnotte alert('Recommencez !'); init(); message.innerText = 'Cliquez pour dessiner' } else { window. clearInterval(timer);//Effacer le timer let r = awardsList.pop();//Réduire les balles dans la réserve de récompenses timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//Effacer le canevas pour (let i = 0; i < awardsList.length; i++) { awardsList[i].run( }//Faire bouger la balle}, 15) ; switch (r.color) {//cas d'animation de chute de balle : Award.setAttribute('class', 'dropBall1'); 'dropBall2'); cas 2 : récompense.setAttribute('class', 'dropBall3'); cas 3 : récompense.setAttribute('class', 'dropBall4'); //Le gashapon réussit et invite Award.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball case'; 1 : message.innerText = 'Boule verte ! '; cas 2 : message.innerText = 'Balle jaune ! '; cas 3 : 'Boule rouge !';
L'animation tombante du gashapon ici est complétée à l'aide des images clés de l'animation CSS :
.dropBall1 {contenu : ;position : absolue;gauche : 0;haut : 0;largeur : 60px;hauteur : 60px;affichage : bloc;arrière-plan : url(../img/1.png) no-repeat;background-size : contain;animation : déposez 1 s de sortie facilitée vers l'avant ; -webkit-animation : déposez 1 s de sortie facilitée vers l'avant ;}.dropBall2 {contenu : ;position : absolue;gauche : 0;haut : 0;largeur : 60px;hauteur : 60px;affichage : bloc;arrière-plan : url(../img/2.png) no-repeat;background-size : contenir ;animation : déposez 1 s de sortie facilitée vers l'avant ;-webkit-animation : déposez 1 s de sortie facilitée vers l'avant ;}.dropBall3 {content : ;position : absolu;gauche: 0;haut: 0;largeur: 60px;hauteur: 60px;affichage: bloc;arrière-plan: url(../img/3.png) no-repeat;background-size: contain;animation: drop 1s easy -out forwards;-webkit-animation : drop 1s easy-out forwards ;}.dropBall4 {content : ;position : absolue;left : 0;haut: 0;largeur: 60px;hauteur: 60px;affichage: bloc;arrière-plan: url(../img/4.png) no-repeat;background-size: contain;animation: drop 1s easy-out forward; -webkit-animation : suppression de 1 s de sortie facile ;}@keyframes drop { 0% { transform: scale(0.7 }); 50 % { transform : scale(1); } 51 % { transform : translateY(0px); (0,7); } 50 % { -webkit-transform : scale(1); } 51 % { -webkit-transform : traduireY(0px); 100% { -webkit-transform: traduireY(100px }});Finition
Bien sûr, vous devez ajouter init(); à la fin pour faire fonctionner la machine gashapon. À ce stade, cette simple machine gashapon est terminée et l'effet est prévisualisé.
RésumerBien que cette démo soit relativement simple, il y a quand même quelques points à noter et certains domaines qui peuvent être optimisés.
Note
img objet
Ces balises img en 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>
Le style s'écrit également display: none;. Ceci est écrit pour obtenir l'objet img en js. Bien sûr, vous pouvez également écrire ces balises img directement dans le fichier js sans les écrire en html :
var img = nouvelle Image(); img.src = 'img/1.png';
De cette façon, vous pouvez également obtenir l'objet img et peut également être utilisé pour dessiner du gashapon.
effacer la minuterieLe minuteur est effacé dans le code avant que le minuteur ne soit appelé. Le but est que si le minuteur n'est pas effacé, le minuteur continuera à compter, ce qui rendra l'animation de plus en plus étrange.
toileLorsque vous dessinez sur le canevas, l'image peut être floue ou agrandie. Cette situation peut être résolue en définissant les attributs de largeur et de hauteur de la balise canevas pour qu'ils soient identiques aux attributs de largeur et de hauteur du style.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.