Animation

แอนิเมชั่น

แอนิเมชันเป็นศิลปะในการสร้างภาพลวงตาของการเคลื่อนไหวโดยการแสดงชุดภาพนิ่งติดต่อกันอย่างรวดเร็ว

ในแอปของเรา เราใช้แอนิเมชันเพื่อทำให้ดูเหมือนสี่เหลี่ยมผืนผ้ากำลังเคลื่อนไปทางขวา

เฟรมอิสระ

เพื่อให้แน่ใจว่าแอนิเมชั่นของเราทำงานได้อย่างราบรื่นบนอุปกรณ์ทั้งหมด เราได้ออกแบบให้ไม่มีเฟรม

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

การเคลื่อนไหวตามเวลา

ในการใช้การเคลื่อนไหวตามเวลาเราใช้

เดลต้าไทม์

 Private DeltaTime As TimeSpan

DeltaTime คือเวลาตั้งแต่เฟรมสุดท้ายถูกดึงออกมา

 DeltaTime = CurrentFrame - LastFrame

ความเร็ว

 Private Velocity As Single = 250.0F

ความเร็วคือความเร็วที่เราต้องการให้สี่เหลี่ยมเคลื่อนที่ โดยวัดเป็นพิกเซลต่อวินาที

เราสามารถปรับค่านี้เพื่อเปลี่ยนความเร็วของสี่เหลี่ยมของเราได้

ระยะทาง

เราคำนวณระยะทางที่สี่เหลี่ยมผืนผ้าของเราควรเคลื่อนที่โดยพิจารณาจากความเร็วคูณด้วย deltaTime

ระยะทาง = ความเร็ว * DeltaTime

เพื่อให้แน่ใจว่าสี่เหลี่ยมของเราเคลื่อนที่ด้วยความเร็วสม่ำเสมอโดยไม่คำนึงถึงอัตราเฟรม

ตัวอย่างเช่น หากอัตราเฟรมต่ำ deltaTime จะมีขนาดใหญ่ขึ้น และสี่เหลี่ยมของเราจะเคลื่อนระยะห่างในเฟรมนั้นมากขึ้นเพื่อชดเชย

เฟรมต่อวินาที	เดลต้าไทม์	ระยะทาง
428.1 สูง	0.0023366 วินาที	0.58415 พิกเซล
38.8 ต่ำ	0.0257694 วินาที	6.44235 พิกเซล

RectPostion.X

RectPosition คือ Vector2 ที่แสดงตำแหน่งของสี่เหลี่ยมของเรา

 Private RectPostion As New Vector2(Rect.X, Rect.Y)

เราใช้ Vector2 เนื่องจากสามารถจัดเก็บค่าจุดลอยตัวที่มีความแม่นยำเพียงจุดเดียว ซึ่งช่วยให้วางตำแหน่งสี่เหลี่ยมของเราได้แม่นยำยิ่งขึ้น

ตัวอย่าง:

69.7753143 เป็นจำนวนจุดลอยตัวที่มีความแม่นยำเดียว (เดี่ยว)

นี่เป็นสิ่งสำคัญสำหรับแอนิเมชั่นของเรา เนื่องจากตำแหน่งของสี่เหลี่ยมผืนผ้าได้รับการอัปเดตอย่างรวดเร็วและมีความแม่นยำสูง

 RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt

เราใช้เลขคณิตเวกเตอร์เพื่อคำนวณตำแหน่งใหม่ของสี่เหลี่ยมผืนผ้าโดยพิจารณาจากตำแหน่งปัจจุบันและความเร็ว

ตัวดำเนินการ += ใช้เพื่ออัปเดตค่าของ RectPostion.X ที่มีอยู่ โดยเพิ่มผลลัพธ์ของ velocity * deltaTime เข้ากับค่าปัจจุบัน

สี่เหลี่ยม.X

 Private Rect As New Rectangle(0, 100, 300, 300)

เมื่อวาดรูปสี่เหลี่ยมผืนผ้าของเราไปที่หน้าจอ เราใช้การแสดงตำแหน่งจำนวนเต็มมากกว่าการแสดง Vector2

เพื่อให้แน่ใจว่าตำแหน่งของสี่เหลี่ยมของเราอยู่ในแนวเดียวกับพิกเซลบนหน้าจอเสมอ

เราทำเช่นนี้เพื่อหลีกเลี่ยงสิ่งแปลกปลอมทางการมองเห็น เช่น การเบลอหรือขอบหยัก

เราใช้ Math.Round เพื่อปัดเศษองค์ประกอบ X ของ RectPosition ให้เป็นค่าจำนวนเต็มที่ใกล้ที่สุด

 Rect.X = Math.Round(RectPostion.X)

ตัวอย่าง:

ค่าของ RectPostion.X คือ 69.7753143

ค่าจำนวนเต็มที่ใกล้ที่สุดคือ 70

ดังนั้นเราจึงตั้งค่า Rect.X เป็น 70

 FillRectangle(Brushes.Purple, Rect)

จากนั้นค่าจำนวนเต็มจะใช้ในการวาดรูปสี่เหลี่ยมผืนผ้าบนแบบฟอร์มของเราโดยใช้ฟังก์ชัน FillRectangle