تحريك العناصر في Swift Playground

الرغبة في إضافة حركة تتمثل في تحريك شكل مستطيل داخل حلقة تكرارية for لخلق سيرٍ عشوائي يعكس تطور الموقع عبر الزمن. ومع ذلك، تلاحظ أن الشكل يتم تحديثه مرة واحدة فقط في نهاية الحلقة، وبالتالي لا تشهد أي تغييرات متتابعة.

التحديثات على الشكل تحتاج إلى فترات زمنية قصيرة بين كل تحريك والآخر لكي تظهر التغييرات بشكل متتابع. بما أن Swift Playground ليس بيئة حية متواصلة، فمن الممكن استخدامها في توضيح الأفكار الأساسية ولكنها غير مناسبة لرؤية الحركة بشكل واقعي.

لتحقيق هدفك، يمكنك استخدام الحلقة التكرارية for لتكرار تحريكات متتابعة، ولكن عليك إضافة فترة زمنية قبل كل تحريك لكي يكون لديك فرصة لرؤية الحركة. يمكنك استخدام DispatchQueue لتأخير تنفيذ كل تحريك، حيث يتم إدراج كل تحريك داخل إغلاق DispatchQueue.main.asyncAfter.

اليك كود معدّل:

swiftCopy code
import UIKit
import PlaygroundSupport

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

class Bird: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = #colorLiteral(red: 0.960784316062927, green: 0.705882370471954, blue: 0.200000002980232, alpha: 1.0)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func move(dx: CGFloat, dy: CGFloat, duration: TimeInterval) {
        UIView.animate(withDuration: duration) {
            self.frame.origin.x += dx
            self.frame.origin.y += dy
        }
    }
}

let viewController = ViewController()
PlaygroundPage.current.liveView = viewController
PlaygroundPage.current.needsIndefiniteExecution = true

let bird = Bird(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
viewController.view.addSubview(bird)

let numberOfSteps = 100

for _ in 1...numberOfSteps {
    let dx = CGFloat(arc4random_uniform(10))
    let dy = CGFloat(arc4random_uniform(10))
    let duration = TimeInterval(Float(arc4random()) / Float(UINT32_MAX) * 2) // Random duration between 0 and 2 seconds
    
    DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
        bird.move(dx: dx, dy: dy, duration: duration)
    }
}

هذا التعديل يوفر حركة متتابعة للمستطيل داخل حلقة التكرار for، ويظهر تغييرات الحركة عبر الزمن بفضل استخدام DispatchQueue لتأخير كل تحريك بمدة زمنية عشوائية. هذا يسمح للمستخدم برؤية التغييرات المتتابعة في موقع الشكل على مدار فترة الزمن.

بالطبع، إليك المزيد من المعلومات حول الطريقة التي تم بها تعديل الكود وكيفية عمله:

1. تعديلات على الكلاس Bird:

   • تم إضافة دالة move(dx:dy:duration:) لتحريك العنصر بمقدار معين (dx و dy) لكل محور (أفقي ورأسي) مع فترة زمنية محددة.
   • في داخل هذه الدالة، تم استخدام UIView.animate(withDuration:) لتحديث موقع العنصر بشكل تلقائي مع تأثيرات التحريك المنسجمة.

2. تكرار الحركة:

   • تم استخدام حلقة تكرارية for لتوليد عدد معين من الخطوات (في هذه الحالة 100 خطوة) لحركة العنصر.
   • تم توليد قيم متعشوبة عشوائياً لـ dx و dy لكل خطوة باستخدام arc4random_uniform.
   • تم توليد قيم متعشوبة عشوائياً لفترة الزمن بين كل تحريك باستخدام arc4random وتحويلها إلى TimeInterval.

3. تأخير التحريك:

   • استخدمنا DispatchQueue.main.asyncAfter لتأخير تنفيذ كل تحريك بفترة زمنية عشوائية.
   • تم استخدام duration المولدة عشوائيًا كوقت لتأخير كل تحريك.

4. تعديلات على Playground:

   • تم تعيين PlaygroundPage.current.needsIndefiniteExecution إلى true للسماح بتشغيل الحلقة التكرارية دون انتهاء في بيئة Playground.
   • تم استخدام PlaygroundPage.current.liveView لعرض العنصر المحرك على شاشة Playground.

باستخدام هذه الطريقة، يمكنك رؤية تحرك العنصر على مدى الوقت وكيف تؤثر القيم العشوائية التي تم توليدها على نمط الحركة. يعد هذا مفيدًا جدًا لفهم كيفية تحريك العناصر وتأثير التأخير والزمن على تجربة المستخدم.