ภาพเคลื่อนไหว: ตรวจสอบและแก้ไขเอฟเฟกต์ภาพเคลื่อนไหว CSS

Sofia Emelianova
Sofia Emelianova

ตรวจสอบและแก้ไขภาพเคลื่อนไหวด้วยแท็บลิ้นชักภาพเคลื่อนไหวของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

ภาพรวม

หากต้องการจับภาพภาพเคลื่อนไหว ให้เปิดแท็บภาพเคลื่อนไหว โดยจะตรวจหาภาพเคลื่อนไหวและจัดเรียงเป็นกลุ่มๆ โดยอัตโนมัติ

แท็บภาพเคลื่อนไหวมีวัตถุประสงค์หลัก 2 ประการ ได้แก่

  • ตรวจสอบภาพเคลื่อนไหว ชะลอ เล่นซ้ำ หรือตรวจสอบซอร์สโค้ดเพื่อหากลุ่มภาพเคลื่อนไหว
  • แก้ไขภาพเคลื่อนไหว แก้ไขช่วงเวลา การหน่วงเวลา ระยะเวลา หรือออฟเซ็ตคีย์เฟรมของกลุ่มภาพเคลื่อนไหว ระบบไม่รองรับการแก้ไขคีย์เฟรมและ Bezier

แท็บภาพเคลื่อนไหวรองรับภาพเคลื่อนไหว CSS, การเปลี่ยน CSS, ภาพเคลื่อนไหวในเว็บ และ View Transitions API ยังไม่รองรับภาพเคลื่อนไหว requestAnimationFrame ภาพ

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

กลุ่มภาพเคลื่อนไหวคือชุดของภาพเคลื่อนไหวที่ปรากฏมีความเกี่ยวข้องกัน

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

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

เริ่มต้นใช้งาน

การเปิดแท็บภาพเคลื่อนไหวมี 2 วิธีดังนี้

  • เลือก เพิ่มเติม ปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ > เครื่องมือเพิ่มเติม > ภาพเคลื่อนไหว ภาพเคลื่อนไหวในเมนู
  • เปิดเมนูคำสั่งโดยกดหนึ่งในตัวเลือกต่อไปนี้

    • ใน macOS: Command+Shift+P
    • ใน Windows, Linux หรือ ChromeOS: Control+Shift+P

    จากนั้นเริ่มพิมพ์ Show Animations แล้วเลือกแผง "ลิ้นชัก" ที่สอดคล้องกัน แสดงภาพเคลื่อนไหว

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

แท็บภาพเคลื่อนไหวว่างเปล่า

แท็บภาพเคลื่อนไหวมี 4 ส่วนหลักดังนี้

ส่วนต่างๆ ของแผงภาพเคลื่อนไหว

  1. การควบคุม จากที่นี่ คุณสามารถบล็อก ล้างกลุ่มภาพเคลื่อนไหวที่บันทึกไว้ทั้งหมด หยุดชั่วคราว หยุดชั่วคราว หรือ play_arrow ภาพเคลื่อนไหวเล่นต่อ หรือเปลี่ยนความเร็วของกลุ่มภาพเคลื่อนไหวที่เลือกได้
  2. ภาพรวม เลือกกลุ่มภาพเคลื่อนไหวที่นี่เพื่อตรวจสอบและแก้ไขในแผงรายละเอียด
  3. ไทม์ไลน์ เล่นซ้ำ เล่นภาพเคลื่อนไหวซ้ำ สครับ หรือข้ามไปยังจุดที่ต้องการ
  4. รายละเอียด ตรวจสอบและแก้ไขกลุ่มภาพเคลื่อนไหวที่เลือก

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

ตรวจสอบภาพเคลื่อนไหว

เมื่อคุณจับภาพภาพเคลื่อนไหวแล้ว มี 2-3 วิธีในการเล่นซ้ำ ดังนี้

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

คลิกปุ่มความเร็วของภาพเคลื่อนไหว ปุ่มความเร็วของภาพเคลื่อนไหว ในแถบการควบคุมเพื่อเปลี่ยนความเร็วในการแสดงตัวอย่างของกลุ่มภาพเคลื่อนไหวที่เลือก

ดูรายละเอียดภาพเคลื่อนไหว

เมื่อจับภาพกลุ่มภาพเคลื่อนไหวแล้ว ให้คลิกกลุ่มจากแผงภาพรวมเพื่อดูรายละเอียด

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

แผงรายละเอียด

วางเมาส์เหนือภาพเคลื่อนไหวเพื่อไฮไลต์ในวิวพอร์ต คลิกภาพเคลื่อนไหวเพื่อเลือกในแผงองค์ประกอบ

วางเมาส์เหนือภาพเคลื่อนไหวเพื่อไฮไลต์ในวิวพอร์ต

ภาพเคลื่อนไหวบางรายการจะทำซ้ำไปเรื่อยๆ หากตั้งค่าพร็อพเพอร์ตี้ animation-iteration-count เป็น infinite แท็บภาพเคลื่อนไหวจะแสดงคําจํากัดความและการทำซ้ำ

การทำซ้ำภาพเคลื่อนไหว

ส่วนซ้ายสุดที่มีสีเข้มกว่าของภาพเคลื่อนไหวคือคำจำกัดความ ส่วนด้านขวาที่จางลงมากขึ้น จะแสดงถึงการทำซ้ำ

ตัวอย่างเช่น ในภาพหน้าจอถัดไป ส่วนที่ 2 และ 3 แสดงถึงการทำซ้ำของส่วนที่ 1

แผนภาพแสดงการทำซ้ำภาพเคลื่อนไหว

หากองค์ประกอบ 2 รายการมีภาพเคลื่อนไหวเดียวกัน แท็บภาพเคลื่อนไหวจะกำหนดสีเดียวกันให้ ตัวสีนี้เป็นสีแบบสุ่มและไม่มีความสำคัญใดๆ เช่น ในภาพหน้าจอด้านล่าง องค์ประกอบ 2 รายการ div.eye.left::after และ div.eye.right::after มีภาพเคลื่อนไหว (eyes) เหมือนกัน เช่นเดียวกับองค์ประกอบ div.feet::before และ div.feet::after

ภาพเคลื่อนไหวที่มีโค้ดสี

แก้ไขภาพเคลื่อนไหว

คุณแก้ไขภาพเคลื่อนไหวด้วยแท็บภาพเคลื่อนไหวได้ 3 วิธีดังนี้

  • ระยะเวลาของภาพเคลื่อนไหว
  • การกำหนดเวลาคีย์เฟรม
  • การหน่วงเวลาเริ่มต้น

ในส่วนนี้ สมมติว่าภาพหน้าจอถัดไปแสดงถึงภาพเคลื่อนไหวต้นฉบับ

ภาพเคลื่อนไหวต้นฉบับก่อนการแก้ไข

หากต้องการเปลี่ยนระยะเวลาของภาพเคลื่อนไหว ให้ลากวงกลมแรกหรือวงกลมสุดท้าย

ระยะเวลาที่แก้ไข

หากภาพเคลื่อนไหวกำหนดกฎคีย์เฟรม เหตุการณ์เหล่านี้จะแสดงเป็นวงกลมภายในสีขาว ลากรายการใดรายการหนึ่งเพื่อเปลี่ยนระยะเวลาของคีย์เฟรม

แก้ไขคีย์เฟรมแล้ว

หากต้องการเพิ่มการหน่วงเวลาให้กับภาพเคลื่อนไหว ให้คลิกที่ภาพเคลื่อนไหวนั้น ไม่ใช่วงกลม จากนั้นลากไปไว้ที่ใดก็ได้

แก้ไขการหน่วงเวลาแล้ว

แก้ไของค์ประกอบเทียม ::view-transition ระหว่างภาพเคลื่อนไหว

เมื่อใช้ View Transitions API คุณสามารถเปลี่ยน DOM ได้ในขั้นตอนเดียวในขณะที่สร้างการเปลี่ยนแบบภาพเคลื่อนไหวระหว่าง 2 สถานะ ในระหว่างภาพเคลื่อนไหว API จะสร้างแผนผังองค์ประกอบจำลองโดยใช้โครงสร้างต่อไปนี้

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

หากต้องการแก้ไขโครงสร้างนี้ในองค์ประกอบ > รูปแบบ ให้ทำดังนี้

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บและตรวจสอบหน้าเว็บที่ใช้ View Transitions API เช่น หน้าสาธิตนี้
  2. ในภาพเคลื่อนไหว ให้คลิกหยุดชั่วคราว หยุดชั่วคราว
  3. ในหน้าเว็บ ให้ทริกเกอร์ภาพเคลื่อนไหว แผงภาพเคลื่อนไหวจะจับภาพและหยุดชั่วคราวทันที ตอนนี้คุณดูโครงสร้าง ::view-transition ใน DOM ที่ด้านบนขององค์ประกอบ <head> ได้แล้ว

    การแก้ไข CSS ของ ::view-transition pseudo-element

  4. ในองค์ประกอบ > รูปแบบ ให้แก้ไข CSS ขององค์ประกอบเทียม ::view-transition รายการ

  5. เล่นภาพเคลื่อนไหวต่อและเล่นซ้ำเพื่อดูผลลัพธ์

โปรดดูข้อมูลเพิ่มเติมที่หัวข้อการเปลี่ยนรุ่นอย่างราบรื่นและเรียบง่ายด้วย View Transitions API