การค่อยๆ เปลี่ยนที่กำหนดเอง

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

Sam Thorogood

ในบางครั้ง คุณไม่ต้องการใช้คีย์เวิร์ดการค่อยๆ เปลี่ยนที่รวมอยู่ใน CSS มิเช่นนั้นคุณจะใช้เว็บภาพเคลื่อนไหวหรือเฟรมเวิร์ก JavaScript ในกรณีเหล่านี้ โดยทั่วไปคุณสามารถกำหนดเส้นโค้ง (หรือสมการ) ของตัวเองได้ วิธีนี้จะช่วยให้ควบคุมความรู้สึกของภาพเคลื่อนไหวของโครงการได้มากมาย

สรุป

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

หากสร้างภาพเคลื่อนไหวด้วย CSS คุณจะพบว่าคุณสามารถกำหนดเส้นโค้งเบซิเยร์เพื่อกำหนดเวลาได้ อันที่จริง คีย์เวิร์ด ease, ease-in, ease-out และ linear จะจับคู่กับเส้นโค้งเบซิเยร์ที่กำหนดไว้ล่วงหน้า ซึ่งมีรายละเอียดอยู่ในข้อกำหนดเฉพาะของการเปลี่ยน CSS และข้อกำหนดของเว็บแอนิเมชัน

เส้นโค้งเบซิเยร์เหล่านี้ใช้ 4 ค่าหรือตัวเลข 2 คู่ โดยแต่ละคู่อธิบายพิกัด X และ Y ของจุดควบคุมของเส้นโค้งเบซิเยร์ลูกบาศก์ จุดเริ่มต้นของเส้นโค้งเบซิเยร์มีพิกัด (0, 0) และจุดสิ้นสุดมีพิกัด (1, 1) คุณต้องกำหนดค่า X และ Y ของจุดควบคุม 2 จุด ค่า X สำหรับจุดควบคุม 2 จุดต้องอยู่ระหว่าง 0 ถึง 1 และค่า Y ของจุดควบคุมแต่ละจุดจะเกินขีดจำกัด [0, 1] แม้ว่าข้อมูลจำเพาะจะไม่ชัดเจนนัก

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

สําหรับการเปรียบเทียบ นี่คือเส้นโค้ง 2 เส้น ได้แก่ เส้นโค้งปกติเข้า-ออกและเส้นโค้งที่กําหนดเอง

เส้นโค้งของภาพเคลื่อนไหวค่อยๆ เข้า-ออก

เส้นโค้งของภาพเคลื่อนไหวที่กำหนดเอง

ดูภาพเคลื่อนไหวที่มีการค่อยๆ เปลี่ยนที่กำหนดเอง

CSS สำหรับเส้นโค้งที่กำหนดเองคือ

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

ตัวเลข 2 ตัวแรกคือพิกัด X และ Y ของจุดควบคุมแรก และตัวเลข 2 ตัวที่สองคือพิกัด X และ Y ของจุดควบคุมที่ 2

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

ลองใช้เครื่องมือเส้นโค้งของภาพเคลื่อนไหวนี้เพื่อดูว่าเส้นโค้งส่งผลต่อความรู้สึกของภาพเคลื่อนไหวอย่างไร

ใช้เฟรมเวิร์ก JavaScript เพื่อการควบคุมที่มากขึ้น

บางครั้งคุณก็ต้องการการควบคุมที่มากกว่าที่เส้นโค้งเบซิเยร์เป็นลูกบาศก์ได้ หากต้องการความรู้สึกการตีกลับที่ยืดหยุ่น ให้ลองใช้เฟรมเวิร์ก JavaScript เนื่องจาก CSS หรือเว็บแอนิเมชันนั้นทำได้ยาก

TweenMax

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

ดูภาพเคลื่อนไหวของการค่อยๆ เปลี่ยน

ในการใช้ TweenMax ให้ใส่สคริปต์นี้ในหน้าเว็บ

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

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

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

เอกสารประกอบของ TweenMax จะไฮไลต์ตัวเลือกทั้งหมดที่คุณมีที่นี่ จึงถือว่าคุ้มค่าแก่การอ่าน