ในบทความที่แล้ว เราได้แชร์วิธีใช้ Canvas ในการวาดกราฟิก แต่ภาพวาดทั้งหมดเป็นกราฟิกแบบคงที่ สัปดาห์นี้เราจะเรียนรู้วิธีใช้ Canvas ในการวาดกราฟิกแบบไดนามิก
แอนิเมชั่นคืออะไร?ก่อนที่เราจะวาดแอนิเมชั่น เราต้องเข้าใจว่าแอนิเมชั่นคืออะไร เงื่อนไขพื้นฐานขั้นต่ำที่จำเป็นสำหรับแอนิเมชั่นคืออะไร?
เราสามารถใช้เครื่องมืออะไรในการแสดงภาพเคลื่อนไหวได้?
นี่คือเอฟเฟกต์ภาพเคลื่อนไหวที่วาดโดยใช้ PPT
ตามเอฟเฟกต์ภาพเคลื่อนไหวที่วาดโดย PPT ด้านบน เราจะเห็นได้ว่าเมื่อคุณสลับระหว่างหน้า PPT หลายหน้าอย่างรวดเร็ว คุณจะเห็นเอฟเฟกต์ภาพเคลื่อนไหว
นี่คือองค์ประกอบพื้นฐานของการนำแอนิเมชันไปใช้:
เล่นภาพหลายภาพอย่างต่อเนื่องต่อหน่วยเวลา โดยทั่วไปเวลาในหน่วยนี้จะวัดเป็นวินาที เพื่อให้ได้วิดีโอที่ราบรื่นเพียงพอในกราฟิกที่เรนเดอร์ด้วยคอมพิวเตอร์ จำนวนภาพต่อวินาทีจะต้องมากกว่าหรือเท่ากับอัตราการรีเฟรชของจอภาพ (โดยทั่วไปอัตราการรีเฟรชนี้จะอยู่ที่ 60hz)
สถานะของวัตถุในแต่ละภาพ (ขนาด รูปร่าง สี ตำแหน่ง มุม ฯลฯ) จะต้องเปลี่ยนแปลง
แล้วเราจะใช้เงื่อนไขทั้งสองนี้ใน Canvas ได้อย่างไร?
วิธีวาดกราฟิก 60 ภาพใน 1 วินาทีเราสามารถแปลงสิ่งนี้เป็นการวาดกราฟทุกๆ 1/60 วินาที ใน JavaScript หากเราต้องการทำอะไรสักอย่างเป็นบางครั้งบางคราว วิธีที่เราใช้คือใช้ตัวจับเวลา setinterval
ตัวจับเวลาคืออะไร? setinerval（function f(){}，t）， สามารถส่งผ่านพารามิเตอร์สองตัวไปยังตัวจับเวลาได้ ตัวหนึ่งคือฟังก์ชัน และอีกตัวคือเวลา ความหมายของโค้ดนี้คือการดำเนินการฟังก์ชัน f ทุก ๆ t ms
จากนั้นเราใช้สิ่งนี้เพื่อให้ได้สิ่งที่เราต้องการในการวาดกราฟทุกๆ 1/60 วินาที
setInterval(function(){canCon.fillStyle=black;//canCon.fill หมายถึง หยิบปากกาเพื่อวาดกราฟิกทึบบนกระดาษข้าวนี้ //style=black หมายถึง จุ่มด้วยหมึกสีดำ//อย่างต่อเนื่อง เพื่อดู เพียงแค่หยิบปากกาขึ้นมาเพื่อวาดภาพกราฟิกที่เป็นของแข็งแล้วติดด้วยหมึกสีดำ canCon.arc(233,233,66,0,Math.PI*2); //ลองวาดวงกลมบนกระดาษข้าว (ตำแหน่ง X ของจุดศูนย์กลาง, ตำแหน่ง Y, รัศมีของวงกลม, ตำแหน่งที่จะเริ่มวาดวงกลม และตำแหน่งที่จะสิ้นสุด); //Last จังหวะที่จะวาด},1000/60 )ผลสุดท้าย
แต่ยังไม่มีเอฟเฟ็กต์แอนิเมชัน เนื่องจากกราฟิก 60 ตัวที่วาดภายใน 1 วินาทีจะเหมือนกันทุกประการ ดังนั้นสถานะขององค์ประกอบจึงต้องเปลี่ยนเมื่อวาดแต่ละกราฟิก
ยังไงซะผมขอแนะนำกระโปรงให้ครับ ด้านหน้า 537 ตรงกลาง 631 และสุดท้าย 707 เพื่อนๆ ที่ต้องการเรียนรู้ front-end สามารถมาร่วมเรียนรู้และช่วยเหลือซึ่งกันและกันกับเราได้ มีอาจารย์ในกลุ่มสอนสดฟรีทุกคืน ถ้าไม่อยากเรียนก็อย่าเข้าร่วม
(537-631-707)
จะเปลี่ยนสถานะขององค์ประกอบได้อย่างไร?
ตำแหน่งของวงกลมถูกกำหนดโดยพิกัดของจุดศูนย์กลางของวงกลม ดังนั้นเราจึงสามารถเปลี่ยนตำแหน่งขององค์ประกอบทุกครั้งที่เราวาดผืนผ้าใบ
vary=100;//ให้ตำแหน่งศูนย์กลางเริ่มต้นของวงกลม และตำแหน่ง y ของศูนย์กลางของวงกลมจะเลื่อนลงตามระยะทางในแต่ละครั้งที่วาด setInterval(function(){canCon.fillStyle=black;// canCon.fill หมายถึง หยิบปากกาขึ้นมาเพื่อวาดรูปทรงทึบบนกระดาษข้าวนี้ //style=black หมายถึง จุ่มลงไป หมึกสีดำ //หากต้องการเชื่อมต่อ เพียงหยิบปากกาสำหรับวาดภาพกราฟิกแข็งๆ แล้วติดด้วยหมึกสีดำ canCon.arc(233,y++,66,0,Math.PI*2);//บนกระดาษข้าว ตั้งครรภ์และ วาดวงกลม (ตำแหน่ง X ของศูนย์กลางของวงกลม, ตำแหน่ง Y, รัศมีของวงกลม, ตำแหน่งที่จะเริ่มวาดวงกลม และตำแหน่งที่จะสิ้นสุด); canCon.fill();//จังหวะสุดท้ายที่จะวาด} ,1000/60)สิ่งที่เราเห็นในเวลานี้ไม่ใช่วงกลมที่เคลื่อนไหว แต่เป็นเหมือนแถบความคืบหน้าที่ขยายออกไป เหตุผลนั้นง่ายมาก เราไม่ลบกราฟิกต้นฉบับทุกครั้งที่เราวาดภาพใหม่ ดังนั้นทุกครั้งที่เราวาดกราฟิกใหม่ เราจะต้องลบกราฟิกต้นฉบับออก ทำอย่างไร?
vary=100;//ให้ตำแหน่งศูนย์กลางเริ่มต้นของวงกลม และตำแหน่ง y ของศูนย์กลางของวงกลมจะเลื่อนลงตามระยะทางในแต่ละครั้งที่วาด setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /ลบพิกัดมุมซ้ายบนของพื้นที่สี่เหลี่ยมและความกว้างและความสูงของสี่เหลี่ยมผืนผ้า canCon.fillStyle=black;//ความหมายของ canCon.fill คือหยิบภาพวาดบนข้าวนี้ กระดาษ ปากกาที่มีกราฟิคทึบ //style=black หมายถึงจุ่มด้วยหมึกสีดำ // ถ้าจะรวมเข้าด้วยกัน หมายถึง หยิบปากกาที่วาดกราฟิกทึบขึ้นมาแล้วทาด้วยหมึกสีดำ canCon.arc(233,y++,66 , 0,ม ath.PI*2);//พิจารณาวาดวงกลมบนกระดาษข้าว (ตำแหน่ง X ของศูนย์กลางของวงกลม, ตำแหน่ง Y, รัศมีของวงกลม, ตำแหน่งที่จะเริ่มวาดวงกลมและจุดสิ้นสุด); );// เริ่มวาดภาพ},1000/60)แต่ขณะนี้ยังไม่มีผลอะไรเกิดขึ้นกันแน่? เราสามารถนึกย้อนกลับไปถึงฉากที่เรายังเป็นเด็กเมื่อเราวาดภาพได้ เมื่อเราลบพื้นที่บางส่วนบนกระดาษวาดภาพ เราจำเป็นต้องยกพู่กันออกก่อนหรือไม่จึงจะสามารถใช้ยางลบลบพื้นที่บางส่วนบนกระดาษได้ เราจึงต้องยกปากกาขึ้นก่อนที่จะลบพื้นที่ผืนผ้าใบ
vary=100;//ให้ตำแหน่งศูนย์กลางเริ่มต้นของวงกลม และตำแหน่ง y ของศูนย์กลางของวงกลมจะเลื่อนลงตามระยะทางในแต่ละครั้งที่วาด setInterval(function(){canCon.beginPath();// ยกปากกาขึ้น canCon. clearRect(0, 0, 500, 500);//ลบพิกัดของมุมซ้ายบนของพื้นที่สี่เหลี่ยมและพิกัดของสี่เหลี่ยม width and height canCon.fillStyle=black;//canCon.fill หมายถึง หยิบปากกาเพื่อวาดกราฟิกทึบบนกระดาษข้าวนี้ //style=black หมายถึง จุ่มด้วยหมึกสีดำ//หากเชื่อมต่อเข้าด้วยกัน หยิบปากกาสำหรับวาดภาพรูปทรงทึบแล้วใช้หมึกสีดำ canCon.arc(233,y++,66,0,Math.PI*2); //ลองวาดวงกลมบนกระดาษข้าว (ตำแหน่ง X ของจุดศูนย์กลาง, ตำแหน่ง Y, รัศมีของวงกลม, ตำแหน่งที่จะเริ่มวาดวงกลม และตำแหน่งที่จะสิ้นสุด); //Last จังหวะที่จะวาด},1000/60 )ด้วยวิธีนี้เราจะได้วงกลมที่เคลื่อนที่ได้
สรุปข้างต้นคือคำแนะนำของบรรณาธิการเกี่ยวกับอินเทอร์เฟซ Canvas ที่แข็งแกร่งที่สุดของ H5 เพื่อใช้ฟังก์ชันกราฟิกแบบไดนามิก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!