บทที่ 9
หลักการใส่คีย์เฟรม และการสร้างภาพเคลื่อนไหว2
(Keyframes and Timing in Animation2 )

เนื้อหา: 

การแก้ไขการเคลื่อนไหวของวัตถุด้วยกราฟ 
Graph Editor for Animation 

อย่างที่ทราบกันว่าการสร้างแอนนิเมชันเราสามารถทำได้โดยการใส่คีย์เฟรม เพื่อกำหนดการเคลื่อนไหวหลักๆ ของวัตถุ ในขณะที่โปรแกรมจะคำนวณค่า In-Between ให้กับเรา ซึ่งก็ดูสมเหตุสมผลดี แต่ปัญหาอยู่ที่แล้วเราจะ มั่นใจได้อย่างไรว่าค่า In-Between เหล่านั้นถูกต้องตรงความต้องการของเรา ยกตัวอย่างเช่นการสร้างแอนนิเม ชันของขบวนรถไฟ แล่นจากจุด A ไปยังจุด B เราสามารถทำได้โดยการใส่คีย์เฟรมที่จุด A และ B แล้วปล่อยให้ รถไฟแล่นไปตามค่า In-Between ที่โปรแกรมคำนวณให้ ผลลัพธ์ที่ได้คือขบวนรถไฟที่แล่นด้วยความเร็วคงที่ ตั้งแต่เริ่มออกตัวไปจนจอด แล้วมันมีอะไรไม่ถูกต้องหรือ ในความเป็นจริงนั้นในจังหวะที่รถไฟกำลังออกตัวจะมี ความหน่วงอยู่ ทำให้ความเร็วช้า พอแล่นไปสักพักความเร็วจะเพิ่มขึ้น และจะชะลออีกครั้งก่อนที่จะจอดเทียบ ชานชลา จึงเป็นไปไม่ได้ที่จะแล่นด้วยความเร็วคงที่ตั้งแต่ต้นจนจบ 

ปัญหาเหล่านี้สามารถแก้ไขได้ด้วย Graph Editor โดยที่โปรแกรมจะทำการคำนวณค่าการเคลื่อนไหวที่ไม่มีคีย์ เฟรมเหล่านี้ (In-Between) ออกมาในรูปแบบของกราฟเส้น เราสามารถเข้าไปทำการแก้ไขสร้างค่า Slow-In/ Slow-Out ต่างๆได้ตามต้องการ 

เราสามารถเปิดหน้าต่าง Graph Editor นี้ได้โดยการไปที่ Window/ Animation Editors/ Graph Editor สังเกต จากภาพตัวอย่างที่ 7.6 หน้าตาของหน้าต่างแก้ไขกราฟนี้สามารถแบ่งเป็นสามส่วนหลักๆ ส่วนแรกคือส่วนของ ชุดคำสั่งในการ Edit และไอคอนลัดต่างๆทางด้านบน ส่วนที่สองคือหน้าต่างสีขาวทางซ้ายมือ แสดงประเภทของ การเคลื่อนไหวแบบต่างๆแบ่งออกเป็นสีตามแกน เช่น การเคลื่อนที่, การหมุน, การเปลี่ยนขนาดในแนวแกน X เป็นสีแดง ส่วนสีเขียวและน้ำเงินจะแสดง การเคลื่อนที่, การหมุน, การเปลี่ยนขนาดในแนวแกน Yและ Z ตามลำดับ และในส่วนที่สามคือหน้าต่างสีเทาขวามือ เป็นพื้นที่แสดงลักษณะของเส้นกราฟ โดยจะมีสีของกราฟ เช่นเดียวกับสีของแกน เพื่อให้ผู้ใช้สามารถจำแนกได้อย่างไม่สับสน

ประเภทของเส้นกราฟ 
Tangent Types 
เส้นกราฟมีหลายแบบ แบ่งตามลักษณะความโค้ง ซึ่งลักษณะความโค้งเหล่านี้สามารถปรับได้จาก Tangent Icons บริเวณด้านบนของหน้าต่าง Graph Editor สังเกตภาพประกอบที่ 7.7 ซึ่งแต่ละตัวจะให้คุณสมบัติของเส้น โค้งแตกต่างกัน การปรับความโค้งนี้มีผลโดยตรงกับการเคลื่อนที่ของวัตถุ ว่าจะมีความ Smooth หรือแข็งอย่างไร

เราสามารถเปลี่ยนลักษณะของเส้นกราฟได้ โดยการ Drag Mouse ครอบเส้นกราฟในส่วนที่เราต้องการเปลี่ยน ความโค้ง เส้นกราฟที่ถูกเลือกจะเปลี่ยนเป็นสีขาว จากนั้นก็คลิกที่ไอคอน Tangent ที่ต้องการ กราฟจะถูกเปลี่ยน ลักษณะความโค้งไปเป็นแบบที่เลือก แล้ว Tangents แต่ละตัวมีคุณลักษณะอย่างไรบ้างล่ะ เราจะมาดูกัน

Spline Tangents

เราสามารถเปลี่ยนลักษณะของเส้นกราฟได้ โดยการ Drag Mouse ครอบเส้นกราฟในส่วนที่เราต้องการเปลี่ยน ความโค้ง เส้นกราฟที่ถูกเลือกจะเปลี่ยนเป็นสีขาว จากนั้นก็คลิกที่ไอคอน Tangent ที่ต้องการ กราฟจะถูกเปลี่ยน ลักษณะความโค้งไปเป็นแบบที่เลือก แล้ว Tangents แต่ละตัวมีคุณลักษณะอย่างไรบ้างล่ะ เราจะมาดูกัน

Spline Tangents สร้างเส้นกราฟที่มีความ Smooth ต่อเนื่องกัน ทำให้การเคลื่อนไหวของวัตถุมีความ กลมกลืน เหมาะกับการสร้างการเคลื่อนไหว ของสิ่งที่ เคลื่อนที่อย่างต่อเนื่องอยู่ตลอดเวลา เช่น ปลาที่ว่ายอ ยู่ในน้ำ ใบไม้ที่ร่วงลงสู่พื้น 
Clamped Tangents

Clamped Tangents เป็นลักษณะกราฟตั้งต้นของ โปรแกรม มีลักษณะคล้ายกับ Spline Tangents มาก แตกต่างกันแค่ ถ้ามีการคงที่ของวัตถุที่ตำแหน่งใด ตำแหน่งหนึ่ง Clamped จะให้เส้นกราฟเป็นเส้นตรง ได้ นั่นหมายความว่าวัตถุจะหยุดนิ่งไม่มีการ เคลื่อนไหว (สังเกตเฟรมที่ 12 -14 จากภาพตัวอย่าง) ในขณะที่ Spline จะสร้างเป็นเส้นโค้ง หมายความว่า ใน Spline วัตถุจะไม่สามารถหยุดแบบแข็งทื่อได้เลย 

Linear Tangents 

Linear Tangents ให้เส้นกราฟที่มีลักษณะเส้นตรง มี การหักมุมเป็นมุมแหลม โดยไม่มีส่วนโค้งแต่อย่างใด เหมาะสำหรับการเคลื่อนที่ของเครื่องจักร หุ่นยนต์ หรือวัตถุ ที่ต้องการความเร็วตกกระทบเท่ากับ ความเร็วสะท้อน เช่นการกระแทกกันระหว่างลูกบอล เหล็ก กับผนังเหล็ก หรือจังหวะที่ลูกปิงปองกระทบ หน้าไม้ปิงปองเป็นต้น
Flat Tangents 

Flat Tangents จะสร้างเส้นกราฟที่มีลักษณะคล้าย กับ Clamped แตกต่างที่ Flat จะสร้าง Slow-in, Slow-out ให้กับวัตถุ หมายความว่าในระหว่างสองคีย์ เฟรม วัตถุจะเริ่มเคลื่อนที่ช้า ก่อนจะเพิ่มความเร็วขึ้น ในช่วงกลาง แล้วจะลดความเร็วลงอีกครั้งก่อนที่จะ ผ่านไปยังคีย์เฟรมถัดไป

Step Tangents 

Step Tangents จะสร้างกราฟเส้นตรงในมุม 90 และ 180 องศาเท่านั้น ทำให้กราฟมีลักษณะเหมือน ขั้นบันได กราฟลักษณะนี้จะทำการแช่แข็งวัตถุไว้ที่ ตำแหน่งหนึ่ง จนกว่าจะผ่านไปถึงคีย์เฟรมถัดไป (วัตถุ จะหยุดนิ่ง แล้วพอถึงคีย์เฟรมถัดไป ก็จะกระโดดไป โผล่ที่ตำแหน่งใหม่เลย) เหมาะกับการใส่คีย์เฟรม ให้กับกล้อง (Camera) ที่ต้องการหยุดกล้องเพื่อถ่าย ฉากใดๆไว้เวลาหนึ่ง ก่อนที่จะกระโดดไปถ่ายมุมอื่น ในคีย์เฟรมถัดไปทันที
Plateau Tangents 

Plateau Tangents มีลักษณะคล้าย Clamped แตกต่างกันตรงที่ Plateau จะสามารถบังคับไม่ให้ วัตถุเลยออกจากตำแหน่งที่ต้องการได้ ยกตัวอย่าง เช่นการสร้างลูกบอลที่เด้งกระทบพื้นแล้วกระดอน ขึ้นมา Clamped จะสร้างเส้นโค้งขึ้นมาในจุดที่ลูก บอลกระแทกพื้น แล้วกระเด็นขึ้นมา จากลักษณะของ เส้นกราฟ ในสองคีย์เฟรมนี้มีโอกาสเป็นไปได้ที่ลูก บอลจะเลยเข้าไปในผนังนิดนึง การใช้ Plateau จะ ช่วยป้องกันเหตุการณ์แบบนี้ได้

ทดลองแก้ไขกราฟการกระเด้งของลูกบอล 
Graph Editor for Bouncing Ball 
•	สร้างฉากที่ประกอบด้วยลูกบอล และพื้น สำหรับให้ลูกบอลเด้งขึ้นมา ดังภาพตัวอย่าง เสร็จแล้วให้เลื่อนหัวอ่านไปที่เฟรมที่ 1 ทำการ Select ที่ลูกบอล แล้วกด “S” เพื่อใส่คีย์เฟรม 

2.เลื่อนหัวอ่านไปยังเฟรมที่ 24 แล้วทำการใส่คีย์ เฟรมให้กับลูกบอลอีกทีหนึ่ง

3.เลื่อนหัวอ่านกลับมายังเฟรมที่ 12 ใช้ Move Tool ยกลูกบอลขึ้นดังภาพตัวอย่าง จากนั้นทำการใส่คีย์เฟรมให้กับลูกบอล ลอง Preview ดู จะได้ลูกบอลตกกระทบพื้น แล้วเด้งขึ้นมาที่ ตำแหน่งเดิม จากคีย์เฟรมทั้งสามที่เราใส่เข้า ไป 

4.ไปที่ Window/ Animation Editors/ Graph Editor เพื่อเปิดหน้าต่าง Graph Editor ขึ้นมา จะพบว่า มีเพียงแค่เส้นกราฟสีเขียวอันเดียวที่ ไม่เป็นเส้นตรง ทั้งนี้เนื่องจากวัตถุมีการ เคลื่อนที่ในแนวแกนเดียว นั่นคือแกน Y (เคลื่อนที่ขึ้นแล้วก็ลง) ให้เลือกไปที่หัวข้อ Translate Y (สีเขียว) จากหน้าต่างสีขาวด้าน ขวามือ เพื่อให้หน้าจอแสดงผลของกราฟนี้ เท่านั้น 

5.กดปุ่ม “F” บนคีย์บอร์ด เพื่อทำการ Frame กราฟเส้นนี้ ให้แสดงผลเต็มหน้าจอแสดงผล เพื่อความสะดวกในการแก้ไข สังเกตจาก เส้นกราฟที่มีลักษณะโค้งเล็กน้อยบริเวณตรง กลาง แสดงว่าลูกบอลจะลอยขึ้นมาด้วย ความเร็วคงที่ และจะมีการชะลอตัวเล็กน้อย ก่อนที่จะตกลง ลองกด Preview ดู สังเกต ความสัมพันธ์ระหว่างลูกบอลกับเส้นกราฟ 

6.ในความเป็นจริงเมื่อลูกบอลตกกระทบพื้นจะ กระดอนออกไปอย่างรวจเร็ว มีลักษณะเป็น มุมแหลม ดังนั้นให้ Drag Mouse ครอบ จุดเริ่มต้นและจุดสุดท้ายของกราฟ (เฟรมที่ 1 กับ 24) จุดที่เลือกจะเปลี่ยนเป็นสีเหลือง ในขณะที่เส้นกราฟเปลี่ยนเป็นสีขาว จากนั้น ให้กดไปที่ไอคอน Linear Tangents ขาของตัว ปรับกราฟจะหักเป็นมุมแหลม 

7.Drag Mouse ครอบจุดแรกของกราฟ เพื่อทำการ Select เฉพาะจุดนี้ จะปรากฏขาสีเลือด หมูของข้างออกมา ให้ Drag Mouse ครอบขา ที่อยู่ขวามือ ขาข้างนั้นจะกลายเป็นสีเหลือง การปรับแต่งเส้นกราฟสามารถทำได้โดยการ ปรับขาทั้งสองข้างของแต่ละจุดเหล่านี้ 

8.ไปที่หน้าจอปกติของโปรแกรม เลือกไปที่ Move Tool จากนั้นกลับมาที่หน้าต่าง Graph Editor ใช้เม้าส์ปุ่มกลางลากปรับแต่งขาข้างที่ ถูกเลือกอยู่ ให้เส้นกราฟมีลักษณะดังภาพ ตัวอย่าง 

9.จากนั้นทำการปรับจุดสุดท้าย (เฟรมที่ 24) เช่นเดียวกับจุดแรก ปรับแต่งให้ได้ลักษณะของ กราฟดังภาพตัวอย่าง จากนั้นลอง Preview ดู จะพบว่าลูกบอลกระเด้งขึ้นลงที่กระชับขึ้น ในขณะที่มีการชะลอตัวค้างก่อนที่จะตกลงมา เพิ่มขึ้น ทั้งนี้เนื่องจากเส้นกราฟที่มีความชัน เพิ่มขึ้นในส่วนหัวกับท้าย ในขณะที่มีความชัน น้อยลงบริเวณกึ่งกลาง (เวลาที่ลูกบอลลอยถึง จุดสูงสุด) 

จากการ Edit Graph แบบนี้ จะให้ความรู้สึกของลูกบอลยางที่มีความยืดหยุ่นตกกระทบพื้นมากขึ้น แน่นอนว่า กราฟลักษณะนี้ไม่เหมาะกับวัตถุที่มีความแข็ง หรือมีความยืดหยุ่นน้อย ซึ่งกราฟลักษณะ Linear Tangents น่าจะมีความเหมาะสมกว่า ทั้งนี้ผู้ใช้จะต้องตัดสินใจโดยคำนึงถึงคุณลักษณะของวัตถุและพื้นผิวให้ดี เพื่อให้การ แก้ไขกราฟเป็นไปอย่างสมจริง และให้ผลลัพธ์ตรงตามความต้องการ

แบบฝึกหัด
จงปรับรูปแบบการเคลื่อนไหวของลูกบอลกระเด้ง ( Bouseing Ball) จากการปรับกราฟให้ได้จังหวะที่ดีที่สุด