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

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

Sam Thorogood

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

สรุป

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

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

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

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

หากต้องการเปรียบเทียบ ให้ดูเส้นโค้ง 2 เส้น ได้แก่ เส้นโค้งค่อยๆ เข้า-ออกทั่วไป และเส้นโค้งที่กำหนดเอง

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

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

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

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

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

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

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

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

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

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

TweenMax

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

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

หากต้องการใช้ TweenMax ให้ใส่สคริปต์ต่อไปนี้ในหน้าเว็บของคุณ

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

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

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

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

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