Babel Coder

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

beginner

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

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

<html>
  <head>
    <style>
      #box {
        background: red;
        width: 100px;
        height: 100px;
        transition: 0.5s cubic-bezier(0.3, 0.1, 0.3, 1);
      }

      .end {
        margin-left: 200px;
      }
    </style>
    <script src='https://code.jquery.com/jquery-2.2.3.min.js'></script>
    <script>
      $(document).on('click', (event) => {
        $(event.target).toggleClass('end')
      })
    </script>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

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

Preview

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

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

Animation Button

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

Timeline

ถึงเวลาเอาไปใช้ก็แค่ก็อบบี้ transition ตัวใหม่ที่ Chrome สร้างมาให้เราเป็นพอครับ

New Transition

ถ้าแค่นี้ยังไม่จุใจพอ เรายังสามารถแก้ไข timing function ได้จากตัว editor อีกด้วย แก้ไขไปดูพรีวิวไป ถูกใจเมื่อไหร่ก็นำค่ากลับไปใช้ครับ

Editor

การปรับแก้ด้วยเครื่องมือ ทำให้เราเห็นภาพโดนไม่ต้องคำนวณคณิตศาสตร์ของการเคลื่อนไหว ขอให้ทุกคนสนุกกับ animation ครับ


แสดงความคิดเห็นของคุณ


No any discussions