Debug และแก้ไข animation ด้วย Chrome Developer Tools

Nuttavut Thongjor

19 เม.ย. 2016

การจะสร้าง animation ด้วย CSS3 นั้นไม่ยาก สมัยนี้ถ้าไม่อยากเขียนเองจากศูนย์ แค่พิมพ์ css3 animation generater ลงช่องค้นหาของ Google ทุกอย่างก็เรียบร้อย แต่ถ้าเราอยากแก้ animation หละ? ใช่ครับการสร้างนั้นง่ายกว่าการแก้ ถ้าเราอยากได้ของที่ดีกว่า ตรงใจกว่า เราก็ต้องปรับปรุงให้เป็นของเราเอง

รู้หมือไร่ Chrome Developer Tools มีเครื่องมือใช้จัดการกับ animation ด้วยนะ! ก่อนที่เราจะไปเล่นเครื่องมือนี้ เรามาสร้าง animation โง่ๆขึ้นมากันเถอะ

HTML

1<html>
2  <head>
3    <style>
4      #box {
5        background: red;
6        width: 100px;
7        height: 100px;
8        transition: 0.5s cubic-bezier(0.3, 0.1, 0.3, 1);
9      }
10
11      .end {
12        margin-left: 200px;
13      }
14    </style>
15    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
16    <script>
17      $(document).on('click', (event) => {
18        $(event.target).toggleClass('end')
19      })
20    </script>
21  </head>
22  <body>
23    <div id="box"></div>
24  </body>
25</html>

เราสร้างกล่องสีแดงในโค๊ดตัวอย่างข้างต้นที่พร้อมจะเลื่อนไปทางขวา 200px เมื่อเราจิ้มจึ๊กๆไปที่เจ้ากล่องนั่น กล่องนี้ไม่ได้ย้ายตำแหน่งพรวดพราวซะทีเดียว แต่สวมวิญญาณผู้ดี ค่อยๆขยับอย่างมีชั้นเชิง ด้วยฟังก์ชัน cubic-bezier ดังรูป

Preview

แล้วยังไงต่อ?

Chrome Developer Tools ไม่มีใน IE หลอกครับ เราจึงต้องเปิดเจ้าเครื่องมือนี้ผ่าน Chrome ด้วยการคลิกขวาแล้วเลือก Inspect จากนั้นจิ้มไปที่แท็บ Elements อย่างแผ่วเบา คุณควรจะพบปุ่มนี้

เมื่อคลิกปุ่มแล้วแท็บ animation จะโผล่ขึ้นมา เราสามารถดักจับ animation, แก้ไขความเร็วช้าในการเล่น หรือปรับ Timeline ของ animation ก็ได้ เมื่อเราปรับแก้จนหนำใจ

Timeline