หลักการพื้นฐานที่ต้องเข้าใจก่อน

เฟรมและอัตราเฟรม (Frame & Frame Rate)

เฟรม คือภาพนิ่งหนึ่งภาพในลำดับแอนิเมชัน ส่วน อัตราเฟรม (FPS) คือจำนวนภาพที่แสดงต่อวินาที ยิ่งค่าสูง การเคลื่อนไหวยิ่งลื่นไหล

คีย์เฟรมและอินบีทวีน (Keyframe & Tweening)

คีย์เฟรม (เส้นสีแดงในสมุดถ่ายทอดงานของจริง) คือเฟรมสำคัญที่กำหนดจุดเริ่มต้นและจุดสิ้นสุดของการเคลื่อนไหว ส่วน อินบีทวีน (เส้นสีน้ำเงิน) คือเฟรมระหว่างกลางที่เติมเต็มให้ลื่นไหล ในซอฟต์แวร์ยุคใหม่คอมพิวเตอร์จะช่วยคำนวณส่วนนี้ให้อัตโนมัติ เรียกว่า Interpolation

หลักการเคลื่อนไหว 12 ประการ

รากฐานที่คิดค้นโดยทีมแอนิเมเตอร์ของดิสนีย์ และยังคงใช้ได้จริงจนถึงปัจจุบัน

ประเภทของแอนิเมชัน

ขั้นตอนการทำแอนิเมชันเบื้องต้น

ตัวอย่างจริง: แอนิเมชันด้วย CSS

สำหรับผู้เริ่มต้นที่อยากลองทำแอนิเมชันแบบเร็วๆ บนเว็บ สามารถใช้ CSS ได้โดยไม่ต้องใช้โปรแกรมเฉพาะทาง โค้ดด้านล่างคือลูกบอลกระเด้งพื้นฐานที่ใช้หลักการ Slow In & Slow Out

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 8px;
  animation: bounce 1.5s ease-in-out infinite;
}

/* กำหนดคีย์เฟรมชื่อ bounce */
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}

เครื่องมือแนะนำสำหรับผู้เริ่มต้น

เคล็ดลับสำหรับผู้เริ่มต้น

สรุป

การทำแอนิเมชันพื้นฐานเริ่มต้นจากความเข้าใจเรื่องเฟรม จังหวะเวลา และหลักการเคลื่อนไหว 12 ประการ ไม่ว่าจะเลือกทำแอนิเมชันแบบ 2D, 3D, Stop Motion หรือแม้แต่ CSS บนเว็บไซต์ หัวใจสำคัญคือการฝึกสังเกตธรรมชาติของการเคลื่อนไหวและฝึกฝนอย่างสม่ำเสมอ