นักพัฒนาแสวงหาทางเลือกที่ดีกว่าฟังก์ชัน Easing แบบดั้งเดิมสำหรับแอนิเมชัน

ทีมชุมชน BigGo
นักพัฒนาแสวงหาทางเลือกที่ดีกว่าฟังก์ชัน Easing แบบดั้งเดิมสำหรับแอนิเมชัน

ฟังก์ชัน Animation easing เป็นรากฐานสำคัญของการออกแบบการเคลื่อนไหวดิจิทัลมานานหลายทศวรรษ แต่นักพัฒนาพบว่าฟังก์ชันเหล่านี้มีข้อจำกัดมากขึ้น ฟังก์ชันทางคณิตศาสตร์เหล่านี้ทำหน้าที่แปลงการเคลื่อนไหวเชิงเส้นให้กลายเป็นแอนิเมชันที่ดูเป็นธรรมชาติมากขึ้น โดยการควบคุมวิธีที่วัตถุเร่งความเร็วและลดความเร็ว อย่างไรก็ตาม ฟังก์ชันเดิมๆ เพียงไม่กี่ตัวจากยุค Flash ยังคงครองตลาด ทำให้ผู้สร้างสรรค์ต้องการความยืดหยุ่นและการควบคุมที่มากขึ้น

ประเภทฟังก์ชัน Easing ที่ใช้กันทั่วไป:

  • easeInOutCubic: การเร่งและชะลอตัวที่นุ่มนวลโดยใช้เส้นโค้งคิวบิก
  • easeInOutElastic: เพิ่มเอฟเฟกต์การเด้งหรือการยืดหยุ่นที่เกินขอบเขต
  • easeInOutBack: รวมถึงการคาดการณ์ล่วงหน้า (การเคลื่อนที่ย้อนกลับ) ก่อนการเคลื่อนที่ไปข้างหน้า
  • Linear: การเคลื่อนที่ด้วยความเร็วคงที่ (ดูเหมือนเครื่องจักร)
ภาพรวมของ easing functions ในแอนิเมชัน แสดงการประยุกต์ใช้ในการออกแบบการเคลื่อนไหวดิจิทัล
ภาพรวมของ 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 ในโค้ดไม่ค่อยให้ความยืดหยุ่นในการทำเช่นนั้น

การค้นหาเครื่องมือแอนิเมชันที่ดีกว่ายังคงดำเนินต่อไปขณะที่นักพัฒนาสร้างสมดุลระหว่างประสิทธิภาพการคำนวณกับการแสดงออกเชิงสร้างสรรค์ ไม่ว่าจะผ่านระบบที่ใช้ฟิสิกส์เป็นพื้นฐาน การกำหนดพารามิเตอร์ที่ปรับปรุงแล้ว หรือแนวทางใหม่ทั้งหมด เป้าหมายยังคงเหมือนเดิม: ให้เครื่องมือแก่ผู้สร้างสรรค์เพื่อทำให้การเคลื่อนไหวดิจิทัลมีชีวิตชีวาด้วยความละเอียดอ่อนและความหลากหลายเช่นเดียวกับที่พบในแอนิเมชันแบบดั้งเดิม

อ้างอิง: I'm unsatisfied with easing functions