วิธีตรวจสอบภาพเคลื่อนไหว CSS ของคุณด้วย Chrome DevTools
ภาพเคลื่อนไหว CSS เมื่อทำอย่างถูกต้องสามารถยกระดับเว็บไซต์ของคุณไปอีกระดับหนึ่งได้ แต่การสร้างแอนิเมชั่นเหล่านี้อาจเป็นเรื่องยากหากไม่มีเครื่องมือที่ให้การควบคุมแอนิเมชั่นเหล่านี้ได้ดี จะเป็นอย่างไรหากมีวิธีดูว่าเกิดอะไรขึ้นในทุกขั้นตอนของแอนิเมชั่นของคุณ?
การใช้ฟังก์ชัน DevTools ที่มีอยู่ใน Google Chrome และ Mozilla Firefox ทำให้เราสามารถรับข้อมูลเชิงลึกเกี่ยวกับการสร้างสรรค์ภาพเคลื่อนไหวและทำซ้ำสิ่งที่พบในเว็บไซต์ต่างๆ
การดีบักแอนิเมชั่นขั้นพื้นฐานด้วย DevTools
แท้จริงแล้ว เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome นำเสนอคุณลักษณะที่เป็นประโยชน์มากมายสำหรับการแก้ไขจุดบกพร่องด้านต่างๆ ของการพัฒนาเว็บ รวมถึงแต่ไม่จำกัดเพียง CSS เครื่องมืออเนกประสงค์นี้ช่วยให้ผู้ใช้สำรวจและวิเคราะห์ประสิทธิภาพของเว็บไซต์ ระบุปัญหาที่อาจเกิดขึ้น และเพิ่มประสิทธิภาพองค์ประกอบการออกแบบ เพื่อเป็นจุดเริ่มต้น ผู้ใช้อาจพบว่าการใช้เครื่องมือสำหรับนักพัฒนาเพื่อตรวจสอบและตรวจสอบภาพเคลื่อนไหวภายในโครงการของตนอาจเป็นประโยชน์
ซอร์สโค้ดสำหรับภาพประกอบเหล่านี้สามารถเข้าถึงได้ผ่านพื้นที่เก็บข้อมูล GitHub ซึ่งทำหน้าที่เป็นแหล่งเก็บข้อมูลดิจิทัลสำหรับโครงการพัฒนาซอฟต์แวร์ และอำนวยความสะดวกในการทำงานร่วมกันระหว่างนักพัฒนาโดยมอบฟีเจอร์และเครื่องมือควบคุมเวอร์ชันเพื่อจัดการการเปลี่ยนแปลงที่ทำกับโค้ดเบส
กำหนดภาพเคลื่อนไหวด้วย HTML และ CSS
องค์ประกอบ div และองค์ประกอบปุ่ม นอกจากนี้ยังรวมเอกสาร CSS ชื่อ “style.css” ไว้ด้วย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
เพื่อที่จะใช้ลักษณะที่ปรากฏที่สอดคล้องกันกับองค์ประกอบทั้งสองนี้ จำเป็นต้องสร้างไฟล์ CSS (Cascading Style Sheets) ภายในไดเร็กทอรีเดียวกันกับเอกสาร HTML ไฟล์นี้ควรมีรหัสต่อไปนี้:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
สไตล์เหล่านี้สร้างองค์ประกอบ 2 ส่วน:
กล่องภาพเคลื่อนไหวที่น่าดึงดูดสายตาซึ่งจะหมุนและเปลี่ยนสีเมื่อโหลดหน้าเว็บ
องค์ประกอบอินเทอร์เฟซผู้ใช้ที่เรียกว่า “ปุ่ม” จะได้รับการเปลี่ยนแปลงทางภาพโดยการเปลี่ยน “สีพื้นหลัง” เพื่อตอบสนองต่ออินพุตของผู้ใช้ โดยเฉพาะเมื่อเคอร์เซอร์หรือตัวชี้อยู่เหนือปุ่ม และไม่สัมผัสกับวัตถุอื่นใดบนหน้าจอ การเปลี่ยนแปลงนี้เกิดขึ้นผ่านกระบวนการ"โฮเวอร์"ซึ่งจะทำให้เกิดเหตุการณ์ภายในเบราว์เซอร์หรือแอพพลิเคชั่นซอฟต์แวร์ ทำให้รูปลักษณ์ของปุ่มได้รับการแก้ไขชั่วคราว
การใช้คำสั่ง CSS @keyframes ช่วยให้เกิดภาพเคลื่อนไหวของกล่องสีแดง ในขณะที่ปุ่มใช้การเปลี่ยนแปลงสำหรับการเปลี่ยนแปลง การเปรียบเทียบเทคนิคเหล่านี้สามารถอำนวยความสะดวกได้ผ่านการตรวจสอบแอปพลิเคชันที่เกี่ยวข้องในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์
ตรวจสอบภาพเคลื่อนไหวโดยใช้ DevTools
หากต้องการรับสิทธิ์เข้าถึงแท็บ"ภาพเคลื่อนไหว"ภายในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome โปรดทำตามขั้นตอนเหล่านี้:
การคลิกขวาบนหน้าเว็บปัจจุบันของคุณจะเรียกใช้เมนูบริบท ซึ่งมีตัวเลือกต่างๆ สำหรับจัดการหรือโต้ตอบกับเนื้อหาที่แสดงบนหน้าจอ
⭐คลิกตรวจสอบ
กรุณาคลิกที่จุดแนวตั้งสามจุดซึ่งอยู่ที่มุมขวาบนของหน้าจอ
เข้าถึงตัวเลือก"ภาพเคลื่อนไหว"โดยไปที่หมวดหมู่"เครื่องมือเพิ่มเติม"และเลือกจากที่นั่น
การดำเนินการนี้จะแสดงการแสดงภาพเคลื่อนไหวภายในส่วนล่างของอินเทอร์เฟซ ทำให้ผู้ใช้สามารถเข้าถึงและจัดการเอฟเฟกต์เหล่านี้ได้
เอฟเฟ็กต์ภาพใด ๆ ที่ปรากฏบนหน้าเว็บนี้จะต้องแสดงไว้ในส่วนนี้ ในกรณีที่คุณโหลดหน้าใหม่และวางเคอร์เซอร์ไว้เหนือองค์ประกอบที่ระบุ ลำดับภาพเคลื่อนไหวที่กล่าวมาข้างต้นจะปรากฏในแท็บ"ภาพเคลื่อนไหว"ที่กำหนดเมื่อมีการรีเฟรชพื้นที่แสดงเนื้อหา
แท้จริงแล้ว เมื่อคลิกที่ภาพเคลื่อนไหวใดๆ เหล่านี้ เช่น ภาพเคลื่อนไหวของกล่อง เบราว์เซอร์จะแสดงคีย์เฟรมในลักษณะที่แสดงให้เห็นกลยุทธ์การใช้งาน
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะแสดงภาพรวมของภาพเคลื่อนไหวทั้งหมดที่เกี่ยวข้องกับองค์ประกอบที่เลือก เนื่องจากมีเพียงกระบวนการภาพเคลื่อนไหวเดียวเท่านั้นที่ได้รับการกำหนดไว้สำหรับคอนเทนเนอร์สีแดง นั่นคือ การหมุนและการเปลี่ยนแปลงสี ดังนั้น ข้อมูลเฉพาะเจาะจงที่เกี่ยวข้องกับภาพเคลื่อนไหวนี้เท่านั้นที่จะแสดงภายในอินเทอร์เฟซ
คุณสามารถปรับตำแหน่งของส่วนหัวของตัวควบคุมการเล่นตามแนวไทม์ไลน์เพื่อควบคุมจังหวะของลำดับภาพ ไม่ว่าจะเร่งหรือชะลอความคืบหน้า ขึ้นอยู่กับความต้องการของคุณ นอกจากนี้ ภาพเคลื่อนไหวอาจหยุดชั่วคราวในช่วงเวลาที่กำหนดโดยการสลับระหว่างไอคอนเล่นและหยุดชั่วคราว เพื่อให้คุณควบคุมประสบการณ์การรับชมได้ดียิ่งขึ้น นอกจากนี้ เปอร์เซ็นต์ที่ให้ไว้ที่ส่วนหัวของไทม์ไลน์ยังช่วยให้คุณสามารถควบคุมจังหวะของแอนิเมชั่นได้ โดยสามารถลดความเร็วลง 25% หรือช้าลงอีก 10% ก็ได้
เมื่อตรวจสอบพฤติกรรมของปุ่มโดยใช้เครื่องมือสำหรับนักพัฒนา เราจะสังเกตเห็นคุณลักษณะเฉพาะที่ส่งผลต่อการเปลี่ยนแปลงการมองเห็น เช่น สีและสีพื้นหลัง
ยูทิลิตี้นี้ให้ความสามารถในการแก้ไขภาพเคลื่อนไหวของคุณเพื่อทำความเข้าใจฟังก์ชันการทำงานอย่างครอบคลุม ช่วยให้คุณสามารถวินิจฉัยและแก้ไขปัญหาใด ๆ ที่อาจเกิดขึ้นกับเว็บไซต์ของคุณ หากมีปัญหาใด ๆ เกิดขึ้น
ตัวอย่างแอนิเมชั่นขั้นสูง
รวมมาร์กอัปที่ให้ไว้ภายในองค์ประกอบ ของเอกสาร HTML ดังต่อไปนี้:
<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>
รวมข้อมูลโค้ดที่ให้ไว้ในส่วน ของไฟล์ CSS ของคุณ จากนั้นแทนที่สไตล์ที่มีอยู่ภายในไฟล์นั้นด้วยโค้ดที่เพิ่มใหม่ในภายหลัง
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
การใช้ภาพเคลื่อนไหวแบบเลื่อนขั้นกับองค์ประกอบ div ทั้งหมดเกี่ยวข้องกับการเปลี่ยนทั้งตำแหน่งและสีพื้นหลัง นอกจากนี้ยังมีการใช้ภาพเคลื่อนไหวที่แตกต่างกันเพื่อควบคุมจำนวนก้าวของแต่ละกล่อง
ขณะที่กล่องที่สามเคลื่อนไปในแนวนอนไปทางขอบขวาของหน้าจอในลักษณะที่สอดคล้องกัน กล่องคู่แรกจะเคลื่อนที่ไปสองก้าวพร้อมกัน ในที่สุดส่งผลให้มาถึงที่จุดปลายทางของพื้นที่แสดงผลพร้อมกัน (โดยที่จุดเริ่มต้นของ กล่องที่สองอยู่หน้ากล่องแรก)
การเข้าถึงแท็บ"ภาพเคลื่อนไหว"ภายในแอปพลิเคชันเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และรีเฟรชหน้าเว็บจะทำให้เราสามารถเข้าถึงรายละเอียดที่ครอบคลุมเกี่ยวกับภาพเคลื่อนไหวที่ปรากฏบนเว็บไซต์ได้
ตลอดช่วงเวลาชั่วขณะที่ใช้ร่วมกัน องค์ประกอบภาพเคลื่อนไหวหลายรายการมีอยู่ควบคู่กัน โดยเฉพาะอย่างยิ่ง ภายในบริบทนี้ สีพื้นหลังที่สม่ำเสมอและพิกัดเชิงพื้นที่ของแต่ละช่องรับทั้งสามแห่งจะได้รับแอนิเมชันพร้อมกัน
เป็นที่น่าสังเกตว่าเครื่องหมายตามเส้นทางภาพเคลื่อนไหวแต่ละเส้นทางจะระบุจุดเริ่มต้นและจุดสิ้นสุดของการวนซ้ำทุกครั้งภายในลำดับที่ซ้ำกัน
โหนดว่างทำหน้าที่เป็นคีย์เฟรมที่สำคัญภายในลำดับภาพเคลื่อนไหวของคุณ ในขณะที่โหนดที่มีสีเต็มแสดงถึงทั้งจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว เป็นที่น่าสังเกตว่าการวนซ้ำแต่ละครั้งของแอนิเมชั่นจะนำเสนอองค์ประกอบหลักที่มืดลง
โดยสรุป DevTools มีอินเทอร์เฟซที่ใช้งานง่ายสำหรับการแก้ไขภาพเคลื่อนไหวผ่านกระบวนการเดียวกับที่ใช้สำหรับการปรับคุณสมบัติ CSS มาตรฐาน การแก้ไขใดๆ ที่ทำผ่าน UI ภาพเคลื่อนไหวจะแสดงแบบเรียลไทม์ภายในทั้งส่วนสไตล์อินไลน์ของแท็บสไตล์และในทางกลับกัน ช่วยให้สามารถทดสอบและจำลองการแก้ไขในโครงการจริงได้อย่างสะดวก
ใช้ Chrome DevTools เพื่อดีบัก CSS ของคุณ
ฟังก์ชัน DevTools ภายในเบราว์เซอร์ Google Chrome ทำหน้าที่เป็นทรัพยากรที่มีประสิทธิภาพสูงสำหรับการดีบัก Cascading Style Sheets (CSS) ซึ่งรวมถึงภาพเคลื่อนไหวด้วย คุณลักษณะนี้นำเสนอมุมมองที่ครอบคลุมของแต่ละการเปลี่ยนแปลงและภาพเคลื่อนไหวที่เกิดขึ้นบนหน้าเว็บเฉพาะ ทำให้ผู้ใช้สามารถพิจารณาการกระทำที่แม่นยำที่เกิดขึ้นแบบเรียลไทม์ได้
ในฐานะบุคคลที่มีความเชี่ยวชาญในการพัฒนาเว็บ จำเป็นอย่างยิ่งที่จะต้องมีความเข้าใจอย่างครอบคลุมเกี่ยวกับคุณลักษณะเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของตน หรือทางเลือกอื่นที่เทียบเคียงได้