ฟังก์ชัน Animation easing เป็นรากฐานสำคัญของการออกแบบการเคลื่อนไหวดิจิทัลมานานหลายทศวรรษ แต่นักพัฒนาพบว่าฟังก์ชันเหล่านี้มีข้อจำกัดมากขึ้น ฟังก์ชันทางคณิตศาสตร์เหล่านี้ทำหน้าที่แปลงการเคลื่อนไหวเชิงเส้นให้กลายเป็นแอนิเมชันที่ดูเป็นธรรมชาติมากขึ้น โดยการควบคุมวิธีที่วัตถุเร่งความเร็วและลดความเร็ว อย่างไรก็ตาม ฟังก์ชันเดิมๆ เพียงไม่กี่ตัวจากยุค Flash ยังคงครองตลาด ทำให้ผู้สร้างสรรค์ต้องการความยืดหยุ่นและการควบคุมที่มากขึ้น
ประเภทฟังก์ชัน Easing ที่ใช้กันทั่วไป:
- easeInOutCubic: การเร่งและชะลอตัวที่นุ่มนวลโดยใช้เส้นโค้งคิวบิก
- easeInOutElastic: เพิ่มเอฟเฟกต์การเด้งหรือการยืดหยุ่นที่เกินขอบเขต
- easeInOutBack: รวมถึงการคาดการณ์ล่วงหน้า (การเคลื่อนที่ย้อนกลับ) ก่อนการเคลื่อนที่ไปข้างหน้า
- Linear: การเคลื่อนที่ด้วยความเร็วคงที่ (ดูเหมือนเครื่องจักร)
![]() |
---|
ภาพรวมของ easing functions ในแอนิเมชัน แสดงการประยุกต์ใช้ในการออกแบบการเคลื่อนไหวดิจิทัล |
ปัญหาของฟังก์ชัน Easing แบบมาตรฐาน
ระบบนิเวศปัจจุบันพึ่งพาฟังก์ชันที่กำหนดไว้ล่วงหน้าเพียงชุดเล็กๆ เช่น easeInOutCubic, easeInOutElastic และ easeInOutBack แม้ว่าฟังก์ชันเหล่านี้จะทำงานได้ดีสำหรับแอนิเมชันพื้นฐาน แต่ก็ขาดการควบคุมที่ละเอียดอ่อนซึ่งนักแอนิเมเตอร์แบบดั้งเดิมมีเมื่อสร้างการเคลื่อนไหวด้วยมือ นักพัฒนาพบว่าตนเองใช้เส้นโค้งเดิมๆ ซ้ำแล้วซ้ำเล่า ส่งผลให้ได้ผลลัพธ์ที่คาดเดาได้และดูเป็นกลไกบางครั้ง
ปัญหาหลักเกิดจากลักษณะที่แข็งกระด้างของฟังก์ชันเหล่านี้ ต่างจากแอนิเมชันแบบดั้งเดิมที่การเคลื่อนไหวแต่ละอย่างสามารถสร้างขึ้นมาเป็นเอกลักษณ์เฉพาะสำหรับบริบทของมัน การใช้ easing ที่ใช้โค้ดจะบังคับให้ผู้สร้างสรรค์เลือกจากตัวเลือกที่จำกัด ข้อจำกัดนี้เห็นได้ชัดเจนโดยเฉพาะในแอนิเมชันตัวละครแบบ procedural และ motion graphics ที่ความหลากหลายและการควบคุมที่ละเอียดอ่อนมีความสำคัญมากที่สุด
โซลูชันแบบ Closed-Form ได้รับความนิยม
ความก้าวหน้าที่สำคัญในการอภิปรายนี้มาจากแนวทางที่ใช้ฟิสิกส์เป็นพื้นฐานโดยใช้โซลูชันทางคณิตศาสตร์แบบ closed-form นักพัฒนาคนหนึ่งได้แบ่งปันการใช้งานที่สมบูรณ์ของระบบ damped harmonic oscillator ที่สามารถสร้างการเคลื่อนไหวแบบสปริงโดยไม่ต้องใช้การจำลองแบบทีละขั้นตอน แนวทางนี้มีข้อได้เปรียบหลายประการเหนือวิธีการแบบดั้งเดิม
โซลูชันแบบ closed-form ช่วยให้นักพัฒนาสามารถคำนวณจุดใดก็ได้ในไทม์ไลน์แอนิเมชันได้ทันที ทำให้เหมาะสำหรับแอปพลิเคชันที่ผู้ใช้สามารถเลื่อนดูแอนิเมชันหรือที่เฟรมอาจถูกข้าม ระบบนี้ใช้หลักการฟิสิกส์ mass-spring-damper ให้การเคลื่อนไหวที่ดูเป็นธรรมชาติและตอบสนองต่อพารามิเตอร์เช่น stiffness และ damping ในลักษณะที่คาดเดาได้
หมายเหตุ: damped harmonic oscillator เป็นระบบฟิสิกส์ที่อธิบายว่าวัตถุเคลื่อนไหวอย่างไรเมื่อติดกับสปริงที่มีแรงเสียดทาน สร้างการเคลื่อนไหวแบบกระดอนและคงที่ที่สมจริง
ข้อดีของ Closed-Form Solutions:
- สามารถคำนวณเฟรมแอนิเมชันใดก็ได้ในทันที
- ไม่จำเป็นต้องจำลองแบบทีละขั้นตอน
- ให้ผลลัพธ์ที่สม่ำเสมอไม่ว่าจะเป็น frame rate แบบใด
- เหมาะสำหรับการ scrubbing timeline ในซอฟต์แวร์แอนิเมชัน
- มีประสิทธิภาพมากกว่าการจำลอง physics แบบ iterative
![]() |
---|
กราฟที่แสดงพฤติกรรมการกระเด้งที่แตกต่างกันตามช่วงเวลา เพื่อแสดงผลกระทบของการเคลื่อนไหวในระบบหน่วงที่ใช้สำหรับแอนิเมชัน |
แนวทางพารามิเตอร์ของ Apple แสดงให้เห็นความหวัง
การวิจัยของ Apple เกี่ยวกับฟังก์ชัน kinematic easing แสดงถึงทิศทางการปรับปรุงอีกแบบหนึ่ง ระบบของพวกเขาใช้ฟังก์ชันพารามิเตอร์เดียวที่สามารถปรับได้สำหรับพฤติกรรมต่างๆ เช่น anticipation, overshoot และความถี่ของการแกว่ง แม้จะยืดหยุ่นกว่า easing แบบดั้งเดิม แต่นักพัฒนารายงานความท้าทายเกี่ยวกับการพึ่งพาซึ่งกันและกันของพารามิเตอร์
ความคับข้องใจหลักอยู่ที่วิธีการปรับพารามิเตอร์หนึ่งส่งผลต่อพารามิเตอร์อื่นๆ การเปลี่ยนจำนวนการแกว่งส่งผลต่อทั้งความเร็วของแอนิเมชันและระยะทาง overshoot ทำให้ต้องปรับพารามิเตอร์หลายตัว เพื่อให้ได้ผลลัพธ์ที่ต้องการ สิ่งนี้สร้างเวิร์กโฟลว์ที่นักแอนิเมเตอร์ใช้เวลาปรับแต่งตัวเลขมากกว่าการมุ่งเน้นไปที่การเคลื่อนไหวเอง
พารามิเตอร์ของแอนิเมชันแบบฟิสิกส์:
- Damping: ควบคุมความเร็วในการทำให้การสั่นไหวสงบลง
- Frequency/Stiffness: กำหนดความเร็วในการตอบสนองของระบบ
- Mass: ส่งผลต่อแรงเฉื่อยและโมเมนตัมของวัตถุที่เคลื่อนไหว
- Overshoot: ระยะทางที่แอนิเมชันเคลื่อนไหวเกินเป้าหมายก่อนจะคงที่
ชุมชนสำรวจวิธีการทางเลือก
ชุมชนนักพัฒนากำลังทดลองกับโซลูชันต่างๆ อย่างแข็งขัน นักพัฒนาบางคนหันไปใช้ B-splines เพื่อความต่อเนื่องของอนุพันธ์และลักษณะการเคลื่อนไหวที่ราบรื่น คนอื่นๆ กำลังสำรวจ convolution filters และระบบ feedback control ที่ยืมมาจากสาขาวิศวกรรม
แนวทางหนึ่งที่น่าสนใจโดยเฉพาะคือการใช้เป้าหมายสองตัวในระบบ PD controller - เป้าหมายหลักและเป้าหมาย anticipation ที่สร้างการเคลื่อนไหว wind-up ที่เป็นธรรมชาติ วิธีนี้สร้าง anticipation ที่ดูเป็นอินทรีย์โดยไม่ต้องปรับพารามิเตอร์ที่ซับซ้อน แม้ว่าจะยังต้องการการใช้งานที่ระมัดระวังเพื่อหลีกเลี่ยงความไม่ต่อเนื่องของความเร็ว
หมายเหตุ: PD controllers เป็นระบบ feedback ที่ปรับการเคลื่อนไหวตามความแตกต่างของตำแหน่งและความเร็ว ใช้กันทั่วไปในหุ่นยนต์และระบบควบคุม
การค้นหาเครื่องมือที่ดีกว่า
การอภิปรายเผยให้เห็นความตึงเครียดพื้นฐานระหว่างความง่ายในการใช้งานและการควบคุมเชิงสร้างสรรค์ แม้ว่าฟังก์ชัน easing ปัจจุบันจะทำงานได้เพียงพอสำหรับแอปพลิเคชันส่วนใหญ่ แต่ก็ไม่สามารถให้ช่วงการแสดงออกที่นักแอนิเมเตอร์ต้องการสำหรับการออกแบบการเคลื่อนไหวที่ซับซ้อน ชุมชนดูเหมือนจะสนใจโซลูชันที่ให้ทั้งความสะดวกของการกำหนดพารามิเตอร์และความยืดหยุ่นของเส้นโค้งที่กำหนดเอง
ในแอนิเมชันแบบดั้งเดิม หลักการต่างๆ เป็นเพียงแนวทาง คุณยังคงต้องสร้างการเคลื่อนไหวใหม่ที่เป็นเอกลักษณ์ในแต่ละครั้งตามการแสดงที่ฉากต้องการ ฟังก์ชัน Easing ในโค้ดไม่ค่อยให้ความยืดหยุ่นในการทำเช่นนั้น
การค้นหาเครื่องมือแอนิเมชันที่ดีกว่ายังคงดำเนินต่อไปขณะที่นักพัฒนาสร้างสมดุลระหว่างประสิทธิภาพการคำนวณกับการแสดงออกเชิงสร้างสรรค์ ไม่ว่าจะผ่านระบบที่ใช้ฟิสิกส์เป็นพื้นฐาน การกำหนดพารามิเตอร์ที่ปรับปรุงแล้ว หรือแนวทางใหม่ทั้งหมด เป้าหมายยังคงเหมือนเดิม: ให้เครื่องมือแก่ผู้สร้างสรรค์เพื่อทำให้การเคลื่อนไหวดิจิทัลมีชีวิตชีวาด้วยความละเอียดอ่อนและความหลากหลายเช่นเดียวกับที่พบในแอนิเมชันแบบดั้งเดิม