Animation
1.0.0
الرسوم المتحركة هي فن خلق وهم الحركة من خلال عرض سلسلة من الصور الثابتة في تتابع سريع.
في تطبيقنا، نستخدم الرسوم المتحركة لجعله يبدو كما لو أن المستطيل يتحرك نحو اليمين.
للتأكد من أن الرسوم المتحركة الخاصة بنا تعمل بسلاسة على جميع الأجهزة، قمنا بتصميمها لتكون مستقلة عن الإطار.
وهذا يعني أن الرسوم المتحركة لدينا لا تتأثر بالتغيرات في معدل الإطارات، مما يضمن تجربة متسقة وسلسة لجميع المستخدمين.
لتنفيذ الحركة المستندة إلى الوقت، نستخدم.
Private DeltaTime As TimeSpan
DeltaTime هو الوقت المنقضي منذ رسم الإطار الأخير.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
السرعة هي السرعة التي نريد أن يتحرك بها المستطيل، وتقاس بالبكسل في الثانية.
يمكننا ضبط هذه القيمة لتغيير سرعة المستطيل.
نحسب المسافة التي يجب أن يتحركها المستطيل بناءً على سرعته مضروبة في deltaTime.
المسافة = السرعة * دلتا الزمن
وهذا يضمن أن المستطيل يتحرك بسرعة ثابتة بغض النظر عن معدل الإطارات.
على سبيل المثال، إذا كان معدل الإطارات منخفضًا، فسيكون deltaTime أكبر، وسيتحرك المستطيل الخاص بنا مسافة أكبر في هذا الإطار للتعويض.
| إطارات في الثانية | دلتاتايم | مسافة |
|---|---|---|
| 428.1 عالية | 0.0023366 ثانية | 0.58415 بكسل |
| 38.8 منخفض | 0.0257694 ثانية | 6.44235 بكسل |
RectPosition هو Vector2 الذي يمثل موضع المستطيل الخاص بنا.
Private RectPostion As New Vector2(Rect.X, Rect.Y)
نحن نستخدم Vector2 لأنه يمكنه تخزين قيم الفاصلة العائمة ذات الدقة الواحدة، مما يسمح بتحديد موضع المستطيل بشكل أكثر دقة.
مثال:
69.7753143 هو رقم فاصلة عائمة ذو دقة واحدة (مفرد).
يعد هذا أمرًا مهمًا بالنسبة للرسوم المتحركة لدينا حيث يتم تحديث موضع المستطيل الخاص بنا بسرعة وبدقة عالية.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
نستخدم الحساب المتجه لحساب الموضع الجديد للمستطيل بناءً على موضعه الحالي وسرعته المتجهة.
يتم استخدام عامل التشغيل += لتحديث قيمة RectPostion.X في مكانها، وإضافة نتيجة السرعة * deltaTime إلى قيمتها الحالية.
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.
