การทำให้สิ่งต่าง ๆ เคลื่อนไหว
เปลี่ยนตำแหน่งซ้ำ ๆ เพื่อสร้างภาพเคลื่อนไหว
การทำให้สิ่งต่าง ๆ เคลื่อนไหว เป็นบทเรียน Coding for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Coding for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Coding for Kids มีบทเรียนทั้งหมด 4 บทเรียน
มาทำให้มันเคลื่อนไหวกันเถอะ!
สวัสดีค่ะ นักสร้างภาพเคลื่อนไหว! 🎬🐢 วันนี้เราจะทำให้สิ่งต่าง ๆ เคลื่อนไหว บนหน้าจอ!
ภาพที่เคลื่อนไหวเรียกว่า แอนิเมชัน
แอนิเมชันคืออะไร
แอนิเมชันก็คือการเปลี่ยนแปลงเล็ก ๆ มากมายที่เกิดขึ้นอย่างรวดเร็ว! 🎞️
เหมือนหนังสือพลิกภาพ แต่ละหน้าจะเปลี่ยนไปเล็กน้อย ทำให้ดูเหมือนภาพกำลังเคลื่อนไหว!
ตำแหน่งบนหน้าจอ
เต่ามี ตำแหน่ง ซึ่งหมายถึงจุดที่มันอยู่บนหน้าจอ 📍
เราใช้ตัวเลข x (ซ้าย-ขวา) และ y (ขึ้น-ลง)
เคลื่อนที่ด้วย goto
t.goto(x, y) ส่งเต่าไปยังจุดหนึ่ง 🎯
เปลี่ยนจุดหมาย แล้วเต่าก็จะเคลื่อนที่ไปที่นั่น!
import turtle
t = turtle.Turtle()
t.goto(100, 0)
turtle.done()มันเลื่อนไปแล้ว!
เต่าเลื่อนไปยังตำแหน่ง 100, 0 แล้ว 🐢➡️
นั่นคือการเคลื่อนที่! ลองจินตนาการว่าทำแบบนี้ซ้ำไปเรื่อย ๆ อย่างราบรื่น
ยกปากกาขึ้น
หากต้องการเคลื่อนที่โดยไม่วาดเส้น เราจะยกปากกาขึ้นด้วย t.penup() ✏️⬆️
จากนั้นเต่าจะเคลื่อนที่เหมือนผี โดยไม่ทิ้งร่องรอยไว้! 👻
เคลื่อนที่โดยไม่วาด
ดูเต่าเคลื่อนที่ไปโดยไม่มีเส้นอยู่ด้านหลังสิคะ 👻
import turtle
t = turtle.Turtle()
t.penup()
t.goto(120, 60)
turtle.done()ทีละขั้นตอน
ในการสร้างแอนิเมชัน เราจะขยับทีละน้อย แล้วขยับเพิ่มขึ้นอีกเล็กน้อย 👣
การขยับเล็ก ๆ แต่ละครั้งทำให้การเคลื่อนไหวดูราบรื่น
เปลี่ยนตำแหน่งไปตามเวลา
หากเราเปลี่ยนค่า x ทีละน้อยอย่างต่อเนื่อง เต่าจะค่อย ๆ เคลื่อนผ่านหน้าจอ! 🌬️
import turtle
t = turtle.Turtle()
t.penup()
t.goto(0, 0)
t.goto(20, 0)
t.goto(40, 0)
turtle.done()นี่แหละแอนิเมชัน!
เต่าเคลื่อนที่ไปที่ 0 จากนั้น 20 แล้วก็ 40 🐢💨
การเคลื่อนไหวเล็ก ๆ หลายครั้ง = การเคลื่อนไหวที่ราบรื่น นี่คือเคล็ดลับของแอนิเมชันทั้งหมด!
ปลดล็อกการเคลื่อนไหวแล้ว!
คุณได้เรียนรู้ goto(), penup() และเรียนรู้ว่าแอนิเมชันเกิดจากการเคลื่อนไหวเล็ก ๆ หลายครั้ง 🎬
ตรวจสอบอย่างรวดเร็ว
แบบทดสอบเรื่องแอนิเมชัน! 🎞️
จ้าวแห่งการเคลื่อนไหว!
เย่! 🎉 คุณทำให้สิ่งต่าง ๆ เคลื่อนไหวได้แล้ว
บทเรียนถัดไป: ใช้ลูปเพื่อทำให้สิ่งต่าง ๆ เคลื่อนไหวต่อเนื่อง! 🔁
คำถามที่พบบ่อย
บทเรียน “การทำให้สิ่งต่าง ๆ เคลื่อนไหว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทำให้สิ่งต่าง ๆ เคลื่อนไหว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Coding for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Coding for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทำให้สิ่งต่าง ๆ เคลื่อนไหว”
เปลี่ยนตำแหน่งซ้ำ ๆ เพื่อสร้างภาพเคลื่อนไหว คุณปฏิบัติ Coding for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Coding for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Coding for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การทำให้สิ่งต่าง ๆ เคลื่อนไหว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Coding for Kids นี้ได้ไหม
ได้ บทเรียน Coding for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การทำให้สิ่งต่าง ๆ เคลื่อนไหว
- การเคลื่อนไหวซ้ำ
- การเด้งไปมา
- ภาพเคลื่อนไหวของคุณเอง