ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน
ลดความเร็ว หยุดชั่วคราว และเลื่อนดูภาพเคลื่อนไหว CSS ด้วยแผง Animations ใน DevTools ของเบราว์เซอร์
ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเปิดแผงภาพเคลื่อนไหว
DevTools ของโครม → เครื่องมือเพิ่มเติม → ภาพเคลื่อนไหว (หรือ Cmd+Shift+P → "ภาพเคลื่อนไหว") แผงนี้จะบันทึกทรานซิชันและภาพเคลื่อนไหว CSS ขณะทำงาน โดยแสดงบนไทม์ไลน์ที่มีตัวควบคุมการเลื่อนดูและความเร็วการเล่น
การลดความเร็วภาพเคลื่อนไหว
แผงภาพเคลื่อนไหวมีความเร็วการเล่น 10%, 25% และ 100% การลดความเร็วเหลือ 10% จะเผยให้เห็นปัญหาด้านจังหวะ ปัญหาเส้นโค้งการผ่อน และการกระตุกที่มองไม่เห็นเมื่อเล่นเต็มความเร็ว ซึ่งจำเป็นอย่างยิ่งสำหรับการแก้ไขข้อผิดพลาดของการประสานจังหวะระหว่างองค์ประกอบหลายรายการ
มุมมองไทม์ไลน์ภาพเคลื่อนไหว
ภาพเคลื่อนไหวที่บันทึกไว้แต่ละรายการจะแสดงเป็นแถว พร้อมชื่อองค์ประกอบ แถบระยะเวลา ระยะหน่วง และจำนวนรอบการเล่น รูปเพชรของคีย์เฟรมจะแสดงการเปลี่ยนแปลงของฟังก์ชันกำหนดจังหวะ เมื่อเลื่อนเมาส์เหนือแถว องค์ประกอบนั้นจะถูกเน้นในพื้นที่แสดงผล
การเลื่อนดูไทม์ไลน์
ลากหัวเล่นในแผงภาพเคลื่อนไหวไปยังจุดใดก็ได้ในไทม์ไลน์ภาพเคลื่อนไหว หน้าจะแสดงเฟรมนั้นอย่างแม่นยำ คุณจึงหยุดภาพเคลื่อนไหวไว้ที่ช่วงเวลาใดก็ได้ เพื่อตรวจสอบตำแหน่งองค์ประกอบ ความทึบ และค่าการแปลงพร้อมกันในแผงค่าที่คำนวณแล้ว
การตรวจสอบคีย์เฟรม
คลิกแถวภาพเคลื่อนไหวเพื่อขยาย คีย์เฟรมแต่ละรายการจะปรากฏเป็นรูปเพชรบนไทม์ไลน์ คลิกรูปเพชรของคีย์เฟรมเพื่อไปยังกฎ @keyframes ที่สอดคล้องกันในแผงสไตล์ แล้วแก้ไขพร้อมดูตัวอย่างแบบเรียลไทม์
การแสดงภาพฟังก์ชันกำหนดจังหวะ
DevTools ของโครมจะแสดงเส้นโค้งลูกบาศก์-เบซิเยร์สำหรับแต่ละช่วงของภาพเคลื่อนไหว คลิกไอคอนเส้นโค้งถัดจากฟังก์ชันกำหนดจังหวะในแผงสไตล์ เพื่อเปิดเครื่องมือแก้ไขเส้นโค้งลูกบาศก์-เบซิเยร์ ลากจุดควบคุมและดูภาพเคลื่อนไหวอัปเดตแบบเรียลไทม์
การแก้ไขข้อผิดพลาดของทรานซิชัน
ทรานซิชัน CSS จะถูกบันทึกในแผงภาพเคลื่อนไหวเมื่อมีการเรียกใช้ ลองวางเมาส์เหนือองค์ประกอบหรือสลับคลาส แล้วแผงจะบันทึกทรานซิชัน ตรวจสอบระยะเวลา ระยะหน่วง และฟังก์ชันกำหนดจังหวะ ซึ่งมีประโยชน์เมื่อทรานซิชันทำงานไม่ถูกต้องแต่ไม่ทราบแหล่งที่มา
การตรวจสอบการประกอบภาพเคลื่อนไหว
เมื่อเปิดใช้ เส้นขอบเลเยอร์ ใน การแสดงผล (DevTools → การแสดงผล) องค์ประกอบที่เคลื่อนไหวบนเลเยอร์ GPU ของตัวเองจะแสดงเส้นขอบสีเขียว ภาพเคลื่อนไหวที่ไม่ได้ประกอบภาพ (การทำให้ความกว้าง ตำแหน่งด้านบน หรือสีเคลื่อนไหว) จะไม่แสดงเส้นขอบเลเยอร์และอาจทำให้เกิดการกะพริบของการวาด ซึ่งมองเห็นได้เมื่อเปิดใช้การกะพริบของการวาด
การแก้ไขข้อผิดพลาดด้านประสิทธิภาพของภาพเคลื่อนไหว
บันทึกโปรไฟล์ประสิทธิภาพระหว่างภาพเคลื่อนไหว ในแผนภูมิเปลวไฟ ให้มองหาเหตุการณ์การวาดหรือการจัดวางที่ใช้เวลานานและสอดคล้องกับเฟรมภาพเคลื่อนไหว ภาพเคลื่อนไหวที่ทำงานเฉพาะบนตัวประกอบ (การแปลง/ความทึบ) จะปรากฏเฉพาะเป็นเหตุการณ์การประกอบเลเยอร์ จึงทำงานรวดเร็วและไม่ต้องวาดใหม่
การแก้ไขข้อผิดพลาดของ requestAnimationFrame
ภาพเคลื่อนไหว JS ที่ใช้ rAF จะปรากฏในแผงประสิทธิภาพภายใต้ส่วนเฟรม ฟังก์ชันเรียกกลับ rAF ที่ใช้เวลาเกิน 16ms จะทำให้เฟรมตก ตรวจสอบโปรไฟล์ของฟังก์ชันเรียกกลับเพื่อค้นหาการคำนวณที่มีค่าใช้จ่ายสูง และย้ายการคำนวณเหล่านั้นออกจากเธรดหลักโดยใช้เวิร์กเกอร์เว็บหากทำได้
API ภาพเคลื่อนไหวบนเว็บ
API ภาพเคลื่อนไหวบนเว็บ (element.animate()) และไลบรารีที่อิง WAAPI จะปรากฏในแผงภาพเคลื่อนไหวร่วมกับภาพเคลื่อนไหว CSS แผงนี้ไม่สามารถแยกแหล่งที่มาได้ว่าเป็น CSS หรือ WAAPI แต่การเลื่อนดูไทม์ไลน์และตัวควบคุมการเล่นแบบช้าจะใช้ได้กับทั้งสองแบบ
ตรวจสอบความรู้
การเลื่อนหัวเล่นในแผงภาพเคลื่อนไหวช่วยให้คุณทำอะไรได้บ้าง
สรุป
แผงภาพเคลื่อนไหวของ DevTools จะบันทึกทรานซิชันและภาพเคลื่อนไหว CSS พร้อมไทม์ไลน์ที่เลื่อนดูได้ ความเร็วการเล่นที่ปรับได้ การตรวจสอบคีย์เฟรม และการแก้ไขเส้นโค้งลูกบาศก์-เบซิเยร์ เมื่อใช้ร่วมกับการสร้างโปรไฟล์ประสิทธิภาพและการแสดงภาพเลเยอร์ เครื่องมือนี้จะมอบเครื่องมือที่ครอบคลุมสำหรับแก้ไขทั้งความถูกต้องและประสิทธิภาพของภาพเคลื่อนไหว CSS
คำถามที่พบบ่อย
บทเรียน “ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน”
ลดความเร็ว หยุดชั่วคราว และเลื่อนดูภาพเคลื่อนไหว CSS ด้วยแผง Animations ใน DevTools ของเบราว์เซอร์ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบที่คำนวณแล้วและตัวตรวจสอบโมเดลกล่อง
- ตัวตรวจสอบการจัดวางสำหรับ Flexbox และ Grid
- แผงภาพรวม CSS
- ตัวแก้ไขข้อผิดพลาดของภาพเคลื่อนไหวและการเปลี่ยนผ่าน