HTML Academy · บทเรียน

ภาพเคลื่อนไหวด้วย requestAnimationFrame

สร้างภาพเคลื่อนไหวบน canvas ที่ลื่นไหลด้วยลูปเฟรมภาพเคลื่อนไหว

บทเรียน 4 จาก 413 ขั้นตอน

ภาพเคลื่อนไหวด้วย requestAnimationFrame เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้ requestAnimationFrame

requestAnimationFrame (rAF) จัดกำหนดการเรียกกลับก่อนการวาดหน้าจอครั้งถัดไปของเบราว์เซอร์ และทำให้ภาพเคลื่อนไหวสอดคล้องกับอัตราการรีเฟรชของจอแสดงผล (โดยทั่วไป 60fps) ต่างจาก setInterval ตรงที่ rAF จะหยุดชั่วคราวเมื่อซ่อนแท็บ จึงช่วยประหยัด CPU และแบตเตอรี่

ลูปภาพเคลื่อนไหวพื้นฐาน

ลูป rAF: กำหนดฟังก์ชัน animate ที่วาดเฟรมปัจจุบัน แล้วเรียก requestAnimationFrame(animate) เพื่อจัดกำหนดการเฟรมถัดไป เบราว์เซอร์จะเรียก animate ก่อนการวาดหน้าจอแต่ละครั้ง ทำให้เกิดภาพเคลื่อนไหวต่อเนื่องตามอัตราเฟรมของจอแสดงผล

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

พารามิเตอร์ timestamp

rAF ส่ง DOMHighResTimeStamp (มิลลิวินาทีนับจากโหลดหน้าเว็บ) ให้ฟังก์ชันเรียกกลับ ใช้ค่านี้คำนวณการเคลื่อนที่ที่ไม่ขึ้นกับอัตราเฟรม: delta = timestamp - lastTimestamp คูณความเร็วด้วย delta เพื่อให้เคลื่อนที่ได้ระยะทางเท่ากันต่อวินาทีไม่ว่าอัตราเฟรมจะเป็นเท่าใด

การเคลื่อนที่ที่ไม่ขึ้นกับอัตราเฟรม

คำนวณเวลาที่ผ่านไปนับจากเฟรมก่อนหน้า แล้วปรับสัดส่วนการเคลื่อนที่ตามเวลานั้น วัตถุที่เคลื่อนที่ด้วยความเร็ว 100px/s จะเคลื่อนที่ 100 * (delta / 1000) พิกเซลต่อเฟรม วิธีนี้ทำให้การจำลองฟิสิกส์สม่ำเสมอบนจอแสดงผล 30fps และ 144fps

การหยุดภาพเคลื่อนไหว

rAF คืนค่าตัวจัดการ ยกเลิกด้วย cancelAnimationFrame(handle) เก็บตัวจัดการไว้ในตัวแปร ตรวจสอบแฟล็ก running ภายในลูป หรือยกเลิกเมื่อทำความสะอาดองค์ประกอบ ควรยกเลิกลูปทุกครั้งเมื่อองค์ประกอบถูกนำออกจาก DOM

รูปแบบภาพเคลื่อนไหวบนแคนวาส

ในแต่ละเฟรม: (1) ใช้ clearRect ล้างแคนวาสทั้งหมด (2) อัปเดตตัวแปรสถานะ (ตำแหน่ง มุม เวลา) (3) วาดวัตถุทั้งหมดที่ตำแหน่งใหม่ (4) เรียก requestAnimationFrame สำหรับเฟรมถัดไป อย่าข้าม clearRect เพราะเฟรมเก่าจะสะสมเป็นรอยลาก

การเปลี่ยนผ่าน CSS เทียบกับ rAF

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

การใช้บัฟเฟอร์คู่บนแคนวาส

สำหรับฉากที่ซับซ้อน ให้วาดบนแคนวาสนอกจอก่อน แล้วใช้ drawImage วาดลงบนแคนวาสที่มองเห็นได้ด้วยการดำเนินการเดียว วิธีนี้ป้องกันการกะพริบโดยไม่แสดงเฟรมที่วาดไม่เสร็จ แคนวาสที่มองเห็นได้จะอัปเดตแบบอะตอมิกในแต่ละเฟรม

การจำกัดอัตราเฟรมเป้าหมาย

จำกัดให้อัตราเฟรมต่ำลง (เช่น 30fps): ตรวจสอบว่าเวลานับจากการวาดครั้งล่าสุดผ่านไปเพียงพอแล้วหรือไม่ก่อนแสดงผล if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; } จัดกำหนดการ rAF ต่อไปไม่ว่าอย่างไร เพื่อคงการตอบสนองไว้

การแก้จุดบกพร่องของภาพเคลื่อนไหว

แผง Performance ของ Chrome DevTools บันทึกการเรียกกลับของ rAF ไว้ในกราฟเปลวไฟของ JS ให้มองหาการเรียกกลับที่ใช้เวลานานเกิน 16ms เพราะจะทำให้เฟรมตก ใช้ตัววัด FPS (Rendering → FPS Meter) เพื่อดูอัตราเฟรมแบบเรียลไทม์ระหว่างการโต้ตอบ

ทางเลือก Web Animations API

สำหรับภาพเคลื่อนไหวแบบประกาศที่เรียบง่ายกว่าและไม่ต้องจัดการเวลาเอง: element.animate(keyframes, options) WAAPI จัดการฟังก์ชันเวลา โหมดการเติม และการวนซ้ำ โดยให้เบราว์เซอร์คำนวณเฟรมแทน ใช้ rAF สำหรับตรรกะการแสดงผลแบบกำหนดเองที่ WAAPI ไม่สามารถอธิบายได้

ตรวจสอบความรู้

เหตุใดจึงควรคูณความเร็วของภาพเคลื่อนไหวด้วยเวลาส่วนต่างในลูป requestAnimationFrame

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

requestAnimationFrame ทำให้ภาพเคลื่อนไหว JavaScript สอดคล้องกับอัตราการรีเฟรชของจอแสดงผล และหยุดชั่วคราวเมื่อซ่อนแท็บ พารามิเตอร์ timestamp ช่วยให้เกิดการเคลื่อนที่ที่ไม่ขึ้นกับอัตราเฟรมผ่านการปรับตามเวลาส่วนต่าง รูปแบบลูปภาพเคลื่อนไหวบนแคนวาส (ล้าง อัปเดต วาด จัดกำหนดการ) เมื่อใช้ร่วมกับ cancelAnimationFrame เพื่อทำความสะอาด เป็นพื้นฐานของภาพเคลื่อนไหวบนเว็บที่ราบรื่นและมีประสิทธิภาพ

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ภาพเคลื่อนไหวด้วย requestAnimationFrame” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ภาพเคลื่อนไหวด้วย requestAnimationFrame” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ภาพเคลื่อนไหวด้วย requestAnimationFrame”

สร้างภาพเคลื่อนไหวบน canvas ที่ลื่นไหลด้วยลูปเฟรมภาพเคลื่อนไหว คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ภาพเคลื่อนไหวด้วย requestAnimationFrame” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy