Untitled-1

กฏ 12 ข้อ Animator และ Motion Graphics Designer จ�ำ เป็นตอ้ งรู้

12 Principles of Animation เปน็ หลกั การท่ถี กู นำ�เสนอในหนงั สือ The Illusion of Life: Disney Anima- tion โดย Animator ยคุ บุกเบกิ ของ Disney คอื Frank Thomas และ Ollie Johnston ท่ีสาระ และหัวใจ คอื การชบุ ชีวติ แก่ภาพวาด ใหโ้ ลดแล่นเคลอ่ื นไหวอย่างมชี ีวติ ชวี า ถึงแมห้ ลกั การน้ีจะมีจดุ เร่มิ ตน้ มาจากงาน Character Animation แตด่ ว้ ยหลกั การท่ีสว่ นใหญจ่ ะเกยี่ วขอ้ ง กบั การเคล่ือนที่ที่มพี ื้นฐานมาจากการเคลื่อนท่ีตามหลักฟสิ ิกส์ เราจงึ สามารถนำ�มาประยุกต์กับงานภาพ เคล่ือนไหวรปู แบบต่างๆ ได้เช่นเดียวกัน ไม่วา่ จะเป็น Motion Graphics, Interactive Design หรือ UI De- sign 1. Squash & Stretch หลักการน้จี ะพูดถงึ การเปล่ียนแปลงมวลของ object ซงึ่ ใน อนิเมชันนัน้ ไม่ไดห้ มายความว่าจะเปลย่ี นกบั ของแขง็ ไมไ่ ด้ เรา สามารถใช้หลกั การ Squash และ Stretch กับของแข็งได้ โดยการเปล่ยี น Pose และ Acting ก็ได้ แต่ใจความสําคัญ ของการใส่ Squash และ Stretch ให้กบั อนิเมชนั นั่นคอื ให้ 2. Anticipation Anticipation เรยี กกันอย่างเข้าใจกนั เองในภาษาไทยว่า “ท่า เตรยี ม” เป็นส่วนท่ีสร้างความสัมพนั ธใ์ ห้คนดตู าม action หรอื pose ทีเ่ ราต้องการจะเล่าใหท้ นั โดยเราตอ้ งใส่ antic- ipation ไปก่อน pose action ซง่ึ anticipation อาจจะเป็น ท่าทางทช่ี ดั เจนอยา่ งการเงือ้ ไมก้ อลฟ์ ก่อนสวิง หรือส่งิ เลก็ ๆ น้อย ๆ อย่างการกระพริบตากอ่ นหันหนา้ ก็ได้ 3. Staging ท่าทางการแสดงนัน้ จะออกมาดหี รอื ไม่ดีนั้น มหี ลักการ งา่ ย ๆ คอื ให้เรามองภาพเป็นภาพแบบ Silhouette (ภาพ เงาดำ�) มอง Character เราเป็นเงาด�ำ เรียบ ๆ ไม่เห็นราย ละเอียดอะไร ถา้ เราสามารถอ่านท่าทางของเงาด�ำ นั้นออก ไดว้ ่ากำ�ลังทำ�อะไร แสดงว่า Staging ของ Character นนั้ คอ่ นขา้ งชัดเจน สามารถทจี่ ะส่อื สารกับคนดูรเู้ รือ่ ง

4. Straight Ahead Action & Pose to Pose หลกั การขอ้ นีจ้ ะมีพ้นื ฐานมาจากเทคนคิ การวาดภาพ Anima- tion แบบดง้ั เดมิ นั่นคือ วธิ กี ารเปล่ยี นลกั ษณะภาพจากภาพ แรกไปถึงภาพสดุ ทา้ ย 5. Follow Through & Overlapping Action Follow Through และ Overlapping Action นนั้ เราใสไ่ ปเพอื่ ให้อนิเมชันในคทั นนั้ ๆ เกดิ ความนา่ เชอื่ ถือโดยวัตถุบางอย่างจะ มแี รงเฉื่อย + แรงโน้มถ่วงเขา้ มาเกย่ี วข้อง รวมถงึ ลําดบั ในการ เคลอื่ นไหวของรา่ งกายท่เี รมิ่ และจบไมพ่ รอ้ มกัน 6. Appeal การสรา้ งแรงดงึ ดดู จากความแตกต่างของการ เคลอ่ื นไหว และการออกแบบทีม่ เี อกลักษณเ์ ฉพาะตวั 7.Timing and Spacing (เวลา) เป็นความตอ่ เนอ่ื งของภาพที่จะทำ�ใหค้ นดูเข้าใจ เหตุการณ์ และก็เวลาที่เปน็ จุดสำ�คัญในการ ดำ�เนินเร่อื งเวลาความต่อเนอ่ื ง 8. Exaggeration Exaggeration ท่หี ลาย ๆ คนอาจจะคดิ วา่ คอื การ แสดงท่ี over action การแสดงท่เี วอรจ์ นเกนิ ไป แต่ จริง ๆ แล้ว คอื การเน้นให้อนเิ มชนั ของเราเห็นชดั เจน ยง่ิ ขึ้น ไมว่ า่ จะเปน็ ทา่ pose, อากปั กรยิ า, หรอื อารมณ์ ของตวั ละคร

9. Slow In & Slow Out ในอนเิ มชนั เราจะหลกี เลีย่ งความเทา่ กนั ท้งั เร่อื งของ Timing & Space ไม่เชน่ นน้ั Animation ท่ีเราสรา้ งขึน้ จะดเู อ่ือยเฉอี่ ย ไมน่ ่าสนใจ การใส่ Slow in และ Slow out จะตอ้ งอา้ งองิ ถึง ความเปน็ จรงิ ดว้ ย อยา่ งเชน่ วตั ถทุ ่ีมมี วลมาก เชน่ รถบรรทกุ จะใชเ้ วลาในการออกตัวและหยุดนานกวา่ รถเกง๋ ทม่ี ีมวลน้อย กวา่ แตอ่ ยา่ งไรกต็ ามทง้ั สองหลักการนีต้ ้องเลอื กใช้ให้เหมาะ สมกบั ในแต่ละเหตุการณ์ 10. Arc Arcs เป็นเส้นทางของ action จากจุดหนึง่ ไปสูจ่ ดุ หนง่ึ วา่ การ เคลือ่ นทีเ่ ปน็ อย่างไร ถือว่าเปน็ เส้นทางของการเคล่อื นไหวโดยเราจะ ใหค้ วามสําคัญกบั ชว่ งกลางระหวา่ งจุดสองจดุ ของ action นน้ั โดย สรา้ ง Arcs หรือวถิ โี ค้งใหก้ บั เส้นทางการเคลื่อนไหว ซ่งึ จะทําให้อนิเม ชันของเราดลู นื่ ไหลและเป็นธรรมชาติย่งิ ขน้ึ ความยดื หยนุ่ เชน่ การว่งิ องศาของอวัยวะส่วนต่างๆ ทีเ่ คล่ือนทต่ี ามวิถีโค้ง จะองิ จากแกนข้อ ต่อหลักของอวยั วะต่างๆ 11. Secondary Action เปน็ ส่วนทแี่ สดงเข้าไปเสรมิ การแสดงหลัก เพอื่ ใหง้ านดมู ชี ีวิตแต่ การเล่าเรื่องตอ้ งไมเ่ ปล่ียนไป อยา่ งเช่น นกั แสดงกําลังดูหนงั และ กนิ ปอ๊ บคอร์นไปด้วย การดูหนงั คอื primary action ส่วนกา รกินป๊อบคอรน์ คือการแสดงรองหรือ secondary action นนั่ เอง หลกั ออกไป 12. Solid Drawing หลกั การที่วา่ ด้วยการกำ�หนดทา่ ทางของตวั ละคร หรอื วตั ถุคร่าวๆ โดยอา้ งองิ พื้นฐานมาจากการวาดภาพ กายวิภาคศาสตร์ นำ�้ หนัก และปริมาตรของแสง และเงา เพ่อื ทำ�ให้เกิดลกั ษณะภาพแบบ 3 มติ ิ และเกิดมมุ มองแบบ Perspective จากมุมมองใดมุมมอง หนงึ่ เพอ่ื ชว่ ยให้ภาพนั้นมีมิติ มีความลึก และความสมดลุ ทีเ่ ป็นไป ตามสัดส่วนจรงิ ตามธรรมชาติ โดยอาจใชเ้ ส้น Grid มาชว่ ยในการ แหล่งอา้ งองิ https://www.beartheschool.com/share-1/2019/7/10/12-principles-of-animation-animator-motion-graphics-designer-1 https://medium.com/artisan-digital-agency