แอนิเมชันคือกราฟ
- ถ้าจะออกแบบได้ ก็ต้องทำให้สร้างซ้ำได้และนำมาประกอบกันได้
- แอนิเมชันทุกแบบคือการที่ค่าบางอย่างเปลี่ยนไปตามอินพุตบางชนิด (เวลา, การเลื่อน, ตำแหน่งเมาส์ ฯลฯ) และเราสามารถวาดการเปลี่ยนแปลงนี้เป็นกราฟได้
- รูปร่างของกราฟคือตัวกำหนดความรู้สึกของการเคลื่อนไหว และเครื่องมือที่ใช้สร้างเส้นโค้งนั้นให้เป็นไปตามต้องการก็คือคณิตศาสตร์
เครื่องมือทางคณิตศาสตร์
- เส้นโค้งเบซิเยร์ (easing): การแสดงการเร่งและหน่วงที่มีจุดเริ่มต้นและจุดสิ้นสุดกำหนดไว้ หลักการคือจุดควบคุมสองจุดจะดึงเส้นโค้งราวกับแม่เหล็ก เกิดจากการประยุกต์ใช้ linear interpolation แบบเวียนซ้ำ แม้จะเป็นการเคลื่อนไหวเดียวกัน แต่ความรู้สึกที่สื่อออกมาก็เปลี่ยนไปอย่างสิ้นเชิงตามแบบ ease-in หรือ ease-out
- การเข้าใกล้แบบเอ็กซ์โพเนนเชียล: ติดตามค่าเป้าหมายอย่างนุ่มนวลได้ด้วยบรรทัดเดียว
value += (target - value) * factor แม้เป้าหมายจะเปลี่ยนทุกเฟรมก็ยังดูเป็นธรรมชาติ ใช้กับการตามเคอร์เซอร์, ตัวนับ, แถบความคืบหน้า เป็นต้น
- สปริง: การสั่นแบบค่อย ๆ ดับลงที่อิงแรงสองชนิดคือแรงคืนตัวและแรงหน่วง ความรู้สึกถูกกำหนดด้วยสองค่า stiffness และ damping ต่างจาก easing ตรงที่ไม่มี duration และเมื่อเป้าหมายเปลี่ยน ก็จะเปลี่ยนผ่านอย่างเป็นธรรมชาติโดยยังคงความเร็วปัจจุบันไว้
- การจำลองฟิสิกส์: ผสานกฎฟิสิกส์อย่างแรงโน้มถ่วง, การชน, แรงเสียดทาน เป็นต้น หัวใจสำคัญคือ "แค่นิยามกฎไว้ การเคลื่อนไหวจะถูกสร้างขึ้นเอง" อย่างคอนเฟตตี คุณไม่จำเป็นต้องออกแบบวิถีของวัตถุแต่ละชิ้นนับสิบชิ้น เพียงตั้งค่าแรงโน้มถ่วงและแรงต้านอากาศก็พอ อย่างไรก็ตาม ความสามารถในการคาดการณ์จะต่ำกว่า จึงเหมาะกับเอฟเฟกต์เสริมมากกว่าการเปลี่ยนผ่านหลักของ UI
- atan2: ฟังก์ชันสำหรับหาทิศทางระหว่างสองจุด ใช้กับกรณีที่องค์ประกอบหันไปตามทิศทางการเคลื่อนที่ หรือเอฟเฟกต์ 3D tilt ที่ทำให้การ์ดเอียงตามทิศทางของเคอร์เซอร์
- ฟังก์ชันตรีโกณมิติ: เหมาะที่สุดกับการทำซ้ำแบบมีคาบ หากใส่ความต่างเฟสให้หลายองค์ประกอบ ก็จะเกิดเอฟเฟกต์คลื่น เช่น ตัวบ่งชี้การพิมพ์, พื้นหลังลอยตัว
- คลื่นฟันเลื่อย: ต่างจากการแกว่งกลับไปกลับมาอย่างนุ่มนวลของ sin เพราะจะเดินหน้า 0→1 แล้วรีเซ็ตทันที เป็นการทำซ้ำแบบทางเดียว ใช้กับวงแหวนพัลส์, ping, ความคืบหน้าแบบวนซ้ำ เป็นต้น
การออกแบบแอนิเมชันที่ซับซ้อน
- ฟังก์ชันแบบแบ่งช่วง: แยกเส้นโค้งที่ซับซ้อนออกเป็นหลายช่วง แล้วออกแบบแต่ละชิ้นแยกกันก่อนนำมาต่อเข้าด้วยกัน ทำให้ปรับแต่งตามเจตนาได้ละเอียดกว่าการจำลองฟิสิกส์ (เช่น ลดความสูงของการเด้งลงอย่างตั้งใจ)
- การระบุความสัมพันธ์แบบพึ่งพา: จุดเริ่มต้นของการออกแบบแอนิเมชันคือ "ค่านี้ขึ้นอยู่กับอะไร?" แบ่งได้เป็น 3 ประเภทคือ แบบอิงเวลา (พบบ่อยที่สุด), แบบอิงค่า (การเลื่อน, ตำแหน่งเมาส์), และแบบอิงเหตุการณ์ (ถูกกระตุ้นด้วยการคลิก, hover)
- การทำไปป์ไลน์: วางชิ้นส่วนต่าง ๆ เรียงตามลำดับบนแกนเวลา ผสานกลยุทธ์การจัดวางอย่างเรียงต่อกัน, ซ้อนทับ, พร้อมกัน, หรือ stagger ทำให้แก้ไขแต่ละชิ้นได้อย่างอิสระ
- การเปลี่ยนสถานะ: วิธีที่ขยับไปยังขั้นถัดไปตามเงื่อนไขแทนที่จะอิงเวลา หากระบุเงื่อนไขการเปลี่ยนผ่านอย่างการยิง→ระเบิด→กระจาย→ดับของดอกไม้ไฟ ก็สามารถจัดการด้วย state machine ได้
- การแยกคุณสมบัติ: แยกคุณสมบัติหลายอย่าง (ขนาด, สี, ความโปร่งใส ฯลฯ) ออกเป็นแทร็กอิสระ แต่ละแทร็กไม่จำเป็นต้องรู้จักกัน จึงปรับละเอียดหรือเพิ่มภายหลังได้ง่าย
สิ่งที่ต้องคำนึงถึง
- ความสุ่ม: ต้องใช้ความสุ่มที่ควบคุมได้ ไม่ใช่สุ่มแบบสมบูรณ์ ประเด็นสำคัญคือการกำหนดขอบเขตว่า "จะควบคุมถึงไหน และจะปล่อยให้สุ่มตั้งแต่ตรงไหน"
- ความเป็นสองทิศทาง: เมื่อทิศทางเปลี่ยนระหว่างที่กำลังแสดงอยู่ ต้องออกแบบให้กลับทิศต่อจากสถานะปัจจุบันได้ เพื่อหลีกเลี่ยงการกระโดดหรือความไม่ลื่นไหล
ข้อจำกัดและจุดแข็งของแอนิเมชันด้วยโค้ด
- แอนิเมชันที่ซับซ้อนอย่างการเคลื่อนไหวของตัวละครหรือการมอร์ฟที่ประณีต เหมาะกับเครื่องมือเฉพาะทางอย่าง Lottie, Rive หรือวิดีโอมากกว่า
- ในทางกลับกัน จุดแข็งของแอนิเมชันด้วยโค้ดคือการโต้ตอบแบบเรียลไทม์ที่ตอบสนองต่ออินพุตของผู้ใช้ได้ทันที
ยังไม่มีความคิดเห็น