โค้ดตัวอย่างสำหรับการนำเอฟเฟกต์แอนิเมชันของเครื่อง Gashapon ไปใช้โดยใช้ Canvas

แป๊บเดียวก็ได้ฝึกงานมาสองเดือนแล้ว ทางบริษัทมีงาน Member Day ทุกๆ เดือน งานของเดือนนี้ก็คืองานจับสลากกาชาปองนั่นเอง ทิ้งไว้ที่ส่วนหน้าใช่ไหม ภารกิจที่ใหญ่ที่สุดคือการทำให้แอนิเมชั่นของเครื่องกาชาปองเป็นจริงขึ้นมา

ฉันตื่นเต้นมากที่ได้พบแอนิเมชั่นเครื่องกาชาปองจากอินเทอร์เน็ต แต่ฉันพบว่ามันใช้แอนิเมชั่น CSS โดยตรงในการเขียนแอนิเมชั่นของกาชาปองจนตาย ฉันไม่ชอบมันมากนัก เลยเลือกใช้แคนวาสในการวาดภาพ แอนิเมชั่นสุ่มของกาชาปอง ก่อนอื่น ฉันเขียนการสาธิตเครื่องกาชาปองแบบง่ายๆ และดูตัวอย่างเอฟเฟกต์

เลย์เอาต์ของเครื่องกาชาปองนั้นค่อนข้างเรียบง่าย คุณเพียงแค่ต้องเพิ่มองค์ประกอบบางอย่างให้กับพื้นหลังพื้นฐานเท่านั้น สิ่งที่สำคัญที่สุดคือแท็กแคนวาส

 <div class=bg> <span id=message>คลิกเพื่อวาด</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png คลาส =แสงสว่าง/> </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>

สไตล์ชีตที่แนบมา:

 body {ระยะขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบ: ไม่มี;}.bg {พื้นหลัง: url (../img/bg.png) ด้านบนไม่ซ้ำ; ขนาดพื้นหลัง: 100%; ล้น: ซ่อนเร้น; ตำแหน่ง: สัมบูรณ์ ;ความกว้าง: 400px;ความสูง: 100%;ระยะขอบบน: 0;ระยะขอบซ้าย: 50%;-webkit-transform: แปล (-50%); -moz-transform: แปล (-50%); -ms-transform: แปล (-50%); -o-transform: แปล (-50%); แปลง: แปล (-50% );}#message {ตำแหน่ง: แน่นอน; text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50%; -webkit-transform: แปล (-50%); -moz-transform: แปล (-50%); -ms-transform: แปล (-50%); -o-transform: แปล (-50%) ;transform: แปล(-50%);}.lotterybg {พื้นหลัง: url(../img/lotterybg.png) บนสุด ไม่ทำซ้ำ; ขนาดพื้นหลัง: 100%;ล้น: มองเห็นได้;ความกว้าง: 80%;ความสูง: 100%;ระยะขอบด้านบน: 160px;ระยะขอบซ้าย: 50%;-webkit-transform: แปล(-50%);-moz-transform: แปล(- 50%); -ms-transform: แปล (-50%); -o-transform: แปล (-50%); แปลง: แปล (-50%);}#myCanvas {ตำแหน่ง: สัมบูรณ์; เส้นขอบ: ไม่มี; ความกว้าง: 285px; ความสูง: 170px; ระยะขอบบน: 15px; ระยะขอบซ้าย: 50%; - webkit-transform: แปล (-50% ); -moz-transform: แปล (-50%); -ms-transform: แปล (-50%); -o-transform: แปล (-50%); แปลง: แปล (-50%);}.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}#start {ตำแหน่ง: แน่นอน ;z-index: 3;ความกว้าง: 202px;ระยะขอบด้านบน: 413px;ระยะขอบซ้าย: 50%;-webkit-transform: แปล (-50%); -moz-transform: แปล (-50%); -ms-transform: แปล (-50%); -o-transform: แปล (-50%); แปลง: แปล (-50% );}.imgSrc {แสดง: ไม่มี; ตำแหน่ง: สัมบูรณ์;}.award {ตำแหน่ง: สัมบูรณ์; เส้นขอบ: ไม่มี; ความกว้าง: 60px; ความสูง: 200px; ด้านบน: 470px;ระยะขอบซ้าย: 50%;-webkit-transform: แปล(-50%);-moz-transform: แปล(-50%);-ms-transform: แปล(-50%);-o-transform: แปล(-50%);แปลง: แปล(-50%);}

ด้วยวิธีนี้เลย์เอาต์จึงเสร็จสมบูรณ์และงานหลักต่อไปคือการวาดภาพบนผืนผ้าใบ

ขั้นแรกให้กำหนดตัวแปรต่างๆ:

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//วัตถุรูปภาพ var ball2 = document.getElementById('ball2' );//วัตถุรูปภาพ var ball3 = document.getElementById('ball3');//วัตถุรูปภาพ var ball4 = document.getElementById('ball4');//Picture object var ballList = [ball1, ball2, ball3, ball4];//Picture object array var ballNum = 4;//จำนวนลูกบอลในเครื่อง gashapon var AwardList = [ ];//การรวบรวมลูกบอลขนาดเล็กในเครื่อง gashapon var timer;//Timer var Award = document.getElementById('awardBall'); var message = document.getElementById('ข้อความ');

กาชาปองแต่ละอันในเครื่องกาชาปองนั้นเป็นวัตถุ ดังนั้นคุณต้องกำหนดวัตถุกาชาปอง:

 function Ball(index, img) { this.r = 30;//รัศมีของลูกบอล this.x = this.rand(canvas.width - this.r * 2);//abscissa เริ่มต้นของลูกบอล this y = this .rand(canvas.height - this.r * 2);//พิกัดแนวตั้งเริ่มต้นของลูกบอล this.color = index;//สีของลูกบอล แสดงด้วยตัวห้อย this.img = img; // วัสดุลูกบอลทำ { this .speedX = this.rand(20) - 10; } ในขณะที่ (this.speedX < 5);//abscissa ของลูกบอลเปลี่ยนความเร็ว ทำ { this.speedY = this.rand(20) - 10; } ในขณะที่ (this.speedY < 5 );//พิกัดแนวตั้งของลูกบอลเปลี่ยนความเร็ว}

ดัชนีค่าของวัตถุกาชาปองที่เข้ามาคือสีของลูกบอลซึ่งแสดงด้วยตัวเลข 1 ถึง 4 และ img คือวัตถุรูปภาพที่ใช้ในการวาดกาชาปอง

ในขั้นตอนที่แล้ว เราได้เพิ่มแอตทริบิวต์ลงในกาชาปองแล้ว ขั้นตอนต่อไปคือการเพิ่มวิธีการในกาชาปอง:

 Ball.prototype = { rand: function (num) {//Random number return Math.random() * num; }, run: function () {//Ball ฟังก์ชันการเคลื่อนที่ this.x += this.speedX; += this.speedY; ถ้า (this.x > canvas.width - this.r * 2) {//ลูกบอลกระทบกับขอบเขตด้านขวา ความเร็วของ Abscissa จะกลายเป็นลบ this.speedX = -this.speedX } ถ้า (this.speedY; .x < 0) {//ลูกบอลชนขอบด้านซ้าย และความเร็วของ Abscissa กลายเป็นค่าบวก this.speedX = Math.abs(this.speedX); } if (this.y > canvas.height - this.r * 2) { //เมื่อลูกบอลกระทบขอบล่าง ความเร็วของพิกัดจะเป็นลบ this.speedY = -this.speedY; } ถ้า (this.y < 0) {//เมื่อลูกบอลตกถึงขอบบน ความเร็วของพิกัดจะกลายเป็นบวกนี่ .ความเร็ว = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//วาดลูกบอล}}

วัตถุประสงค์หลักคือการเพิ่มฟังก์ชันการเคลื่อนไหวให้กับต้นแบบของวัตถุกาชาปอง หน้าที่ของฟังก์ชันการเคลื่อนไหวคือการทำให้กาชาปองเคลื่อนที่ตามความเร็วและเด้งกลับเมื่อสัมผัสกับขอบเขต

ขั้นตอนต่อไปคือการใส่กาชาปองลงในเครื่องกาชาปอง:

 function init() {//การกำหนดค่าเริ่มต้นสำหรับ (let i = 0; i < ballNum; i++) {//สุ่มสร้างลูกบอลที่มีสีต่างๆ ให้ทำดัชนี = Math.floor(4 * Math.random()); = ลูกบอลใหม่ (ดัชนี ballList [ดัชนี]); // วัตถุลูกบอลใหม่} window.clearInterval (ตัวจับเวลา); // ล้างตัวจับเวลา ตัวจับเวลา = setInterval (ฟังก์ชัน () { ctx.clearRect (0, 0, canvas.width, canvas.height);//ล้างผืนผ้าใบสำหรับ (let i = 0; i < AwardList.length; i++) { AwardList[i].run(); }//ทำให้ลูกบอลเคลื่อนที่}, 15) ; }

ด้วยวิธีนี้จะมีลูกบอลขนาดเล็กอยู่ในเครื่องกาชาปองอยู่แล้ว

กระบวนการหลักในการเริ่มกาชาปองคือการคลิกปุ่ม เครื่องกาชาปองจะลดจำนวนไข่กาชาปองและรับไข่กาชาปองที่สอดคล้องกัน การแสดงผลที่ชนะจะเป็น:

 function play() { if (awardList.length === 0) {//ไม่มีลูกบอลในการแจ้งเตือนรางวัลรวม ('เริ่มใหม่อีกครั้ง!'); init(); message.innerText = 'คลิกเพื่อวาด'; อื่น { window.clearInterval(timer);//ล้างตัวจับเวลา ให้ r = AwardList.pop();// ลดลูกบอลในตัวจับเวลาพูลรางวัล = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//ล้างผืนผ้าใบสำหรับ (let i = 0; i < AwardList.length; i++) { AwardList[i].run(); }//ทำให้ลูกบอลเคลื่อนที่}, 15) ; switch (r.color) {//ball droping กรณีที่ 0: Award.setAttribute('class', 'dropBall1'); กรณีที่ 1: awards.setAttribute('class', 'dropBall2'); กรณีที่ 2: รางวัล setAttribute ('คลาส', 'dropBall3'); กรณีที่ 3: รางวัล setAttribute ('คลาส', 'dropBall4'); } setTimeout () //gashapon สำเร็จและแจ้งรางวัล setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball! 1: message.innerText = 'ลูกบอลสีเขียว! '; กรณีที่ 2: message.innerText = 'ลูกบอลสีเหลือง! ';

แอนิเมชันการล้มของกาชาปองที่นี่เสร็จสมบูรณ์โดยใช้คีย์เฟรมของแอนิเมชัน CSS:

 .dropBall1 {เนื้อหา: ;ตำแหน่ง: สัมบูรณ์;ซ้าย: 0;ด้านบน: 0;ความกว้าง: 60px;ความสูง: 60px;จอแสดงผล: บล็อก;พื้นหลัง: url(../img/1.png) ไม่ซ้ำ;ขนาดพื้นหลัง : ประกอบด้วย;ภาพเคลื่อนไหว: เลื่อนไปข้างหน้า 1 วินาที; -webkit-animation: เลื่อนไปข้างหน้า 1 วินาที;}.dropBall2 {content: ;ตำแหน่ง: สัมบูรณ์;ซ้าย: 0;ด้านบน: 0;ความกว้าง: 60px;ความสูง: 60px;จอแสดงผล: บล็อก;พื้นหลัง: url(../img/2.png) ไม่ซ้ำ;ขนาดพื้นหลัง: ประกอบด้วย ;animation: การค่อยๆ เลื่อนไปข้างหน้า 1 วินาที; -webkit-animation: การค่อยๆ เลื่อนไปข้างหน้า 1 วินาที;}.dropBall3 {content: ;position: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 60px; ความสูง: 60px; การแสดงผล: บล็อก; พื้นหลัง: url (../img/3.png) ไม่ทำซ้ำ; ขนาดพื้นหลัง: ประกอบด้วย; ภาพเคลื่อนไหว: ปล่อย 1 วินาทีง่าย ๆ -out ไปข้างหน้า; -webkit-animation: ปล่อย 1s ไปข้างหน้าอย่างง่ายดาย;}.dropBall4 {เนื้อหา: ; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0;ด้านบน: 0;ความกว้าง: 60px;ความสูง: 60px;การแสดงผล: บล็อก;พื้นหลัง: url(../img/4.png) ไม่ซ้ำ;ขนาดพื้นหลัง: มี;ภาพเคลื่อนไหว: ปล่อย 1 วินาทีค่อยๆ เลื่อนไปข้างหน้า; -webkit-animation: เลื่อนไปข้างหน้า 1 วินาที;}@keyframes drop { 0% { แปลง: สเกล (0.7) } 50% { แปลง: สเกล (1); } 51% { แปลง: แปล Y (0px); } 100% { แปลง: แปล Y (100px); }}@-webkit-keyframes ลดลง { 0% { -webkit-transform: scale (0.7); } 50% { -webkit-transform: ขนาด (1); } 51% { -webkit-transform: แปล Y (0px); } 100% { -webkit-transform: แปล Y (100px }}

แน่นอน คุณต้องเพิ่ม init(); ในตอนท้ายเพื่อให้เครื่อง gashapon ทำงาน ณ จุดนี้ เครื่อง gashapon แบบธรรมดานี้เสร็จสมบูรณ์แล้ว และดูตัวอย่างเอฟเฟกต์

แม้ว่าการสาธิตนี้จะค่อนข้างง่าย แต่ก็ยังมีบางประเด็นที่ควรทราบและบางประเด็นที่สามารถปรับให้เหมาะสมได้

บันทึก

วัตถุ img

แท็ก img เหล่านี้ใน 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>

สไตล์นี้เขียนเป็น display: none;. สิ่งนี้ถูกเขียนเพื่อรับวัตถุ img ใน js แน่นอนว่าคุณสามารถเขียนแท็ก img เหล่านี้ลงในไฟล์ js ได้โดยตรงโดยไม่ต้องเขียนเป็น html:

 var img = รูปภาพใหม่ (); img.src = 'img/1.png';

ด้วยวิธีนี้ คุณยังสามารถรับวัตถุ img และยังสามารถใช้เพื่อวาดกาชาปองได้อีกด้วย

ตัวจับเวลาจะถูกล้างในโค้ดก่อนที่จะเรียกตัวจับเวลา จุดประสงค์คือ เพราะหากตัวจับเวลาไม่ชัดเจน ตัวจับเวลาก็จะนับต่อไป ทำให้แอนิเมชั่นดูแปลกมากขึ้นเรื่อยๆ

เมื่อวาดภาพบนผืนผ้าใบ รูปภาพอาจไม่ชัดเจนหรือขยายใหญ่ขึ้น สถานการณ์นี้สามารถแก้ไขได้โดยการตั้งค่าแอตทริบิวต์ความกว้างและความสูงของแท็กผ้าใบให้เหมือนกับแอตทริบิวต์ความกว้างและความสูงของสไตล์

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network