كيفية استخدام الصور لإنشاء رسوم متحركة سلسة في نظام التشغيل iOS

كيفية جعل السحب تتحرك إلى الأبد: رسوم متحركة متكررة بسيطة في iOS

في تطوير iOS، يمكن للرسوم المتحركة أن تضفي الحيوية على التطبيق، وتضيف عنصرًا ديناميكيًا وجذابًا يحبه المستخدمون. 🌥️ أحد الرسوم المتحركة الشائعة التي قد ترغب في إنشائها هو التأثير السلس والمتكرر، مثل تحريك السحب عبر الشاشة. غالبًا ما يتم استخدام هذه الرسوم المتحركة البسيطة والجذابة بصريًا في الألعاب وتطبيقات الطقس وحتى في المشاريع الشخصية لخلق جو هادئ. إذا كنت جديدًا في مجال الرسوم المتحركة على نظام التشغيل iOS، فربما تتساءل عن كيفية جعلها سلسة وتجنب الأخطاء.

تخيل أنك تفتح أحد التطبيقات وترى على الفور السحب تنجرف بلطف عبر الشاشة، مما يخلق خلفية هادئة مثالية. يمكن تحقيق هذا النوع من التأثير باستخدام الرسوم المتحركة `UIImageView` و`UIView` في Swift. الفكرة الأساسية هي تحريك الصورة نفسها (السحابة في هذه الحالة) عدة مرات بحيث تبدو وكأنها تتحرك بشكل مستمر. ومع ذلك، فالأمر ليس سهلاً دائمًا كما يبدو. هناك بعض المخاطر التي يواجهها المطورون غالبًا عند محاولتهم جعل الرسوم المتحركة سلسة، خاصة عند التعامل مع الصور المتكررة.

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

الآن، دعونا نتعمق في الحل لتحريك تلك السحب في حلقة مثالية. باستخدام طريقتي عرض للصور والقليل من سحر الرسوم المتحركة، ستتمكن من إنشاء حركة سلسة لا نهاية لها من شأنها أن تجعل تطبيقك يبدو سلسًا ومصقولًا. هل أنت مستعد لإصلاح الرسوم المتحركة وجعل تلك السحب تنجرف بشكل صحيح؟ دعنا نذهب!

كيف يعمل البرنامج النصي للرسوم المتحركة السحابية في iOS

في مثال البرنامج النصي الموضح أعلاه، الهدف هو إنشاء رسوم متحركة سحابية سلسة ومستمرة تتكرر بلا حدود في تطبيق iOS. الفكرة الرئيسية هي تحريك اثنين UIImageView مثيلات بنفس الصورة السحابية، ونقلها أفقيًا عبر الشاشة. ويتم ذلك عن طريق ضبط مواضعها باستخدام الإطار Origin.x الملكية وتطبيق الرسوم المتحركة على هذه المواقف. يتم استخدام عرضي الصورة بحيث عندما يتحرك أحدهما خارج الشاشة، يكون الآخر جاهزًا ليأخذ مكانه، مما يخلق تأثير حلقة سلسة. من خلال تحريك حركة عروض الصور، يمكنك إعطاء وهم بأن السحب تنجرف باستمرار عبر السماء. 🚀

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

بمجرد إعداد عروض الصور، فإن الخطوة التالية هي تحريكها. ويتم ذلك مع UIView.animate الوظيفة، وهي المسؤولة عن تحريك وجهات النظر مع مرور الوقت. ال UIView.animate تأخذ الوظيفة عدة معلمات: مدة الرسوم المتحركة، وأي تأخير قبل بدء الرسوم المتحركة، وخيارات الرسوم المتحركة (مثل تكرار الرسوم المتحركة)، وكتلة الرسوم المتحركة التي سيتم تطبيقها. في هذه الحالة، يتم تعيين مدة الرسوم المتحركة على 20 ثانية، ويتم ضبط الرسوم المتحركة على التكرار إلى الأبد باستخدام .يكرر خيار. ال .منحني الأضلاع يضمن الخيار تشغيل الرسوم المتحركة بسرعة ثابتة، مما يؤدي إلى إنشاء حركة خطية سلسة. يتم نقل الصور أفقيًا عن طريق موازنة صورها Origin.x من خلال عرض الشاشة.

ومع ذلك، يمكن أن يؤدي الرمز إلى نتائج غير مرغوب فيها، مثل اختفاء الصور أو تحركها في الاتجاه الخاطئ. وذلك لأن إطار يتم تعديل الخاصية مباشرة دون إعادة ضبط الصور عندما تتحرك خارج الشاشة. الحل هو استخدام طريقة مثل com.recycleClouds، الذي يعيد تعيين موضع عروض الصور عندما تتجاوز حدود الشاشة. وهذا يضمن تكرار الصور بسلاسة، دون أن تختفي. تتحقق هذه الطريقة من الموضع x لعروض الصور، وعندما يتحرك أحدها خارج الشاشة، تتم إعادة ضبطه على الجانب الآخر، مما يسمح للحلقة بالاستمرار. بالإضافة إلى ذلك، باستخدام النفس الضعيفة داخل كتلة الإكمال يضمن عدم وجود تسرب للذاكرة بسبب الدورات المرجعية القوية، مما يحسن أداء التطبيق.

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: 20.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: nil)
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        let totalDuration = 20.0
        let animationOptions: UIView.AnimationOptions = [.repeat, .curveLinear]
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: animationOptions, animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }) { [weak self] _ in
            self?.recycleClouds()
        }
    }
    func recycleClouds() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    var totalDuration = 20.0
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: { [weak self] _ in
            self?.optimizeMemory()
        })
    }
    func optimizeMemory() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

إنشاء رسوم متحركة سحابية سلسة في iOS

يتطلب تحريك صورة متكررة، مثل الانجراف السحابي في تطبيق iOS، دراسة متأنية لكل من التأثيرات المرئية والأداء. عندما تحاول تحقيق حلقة لا نهاية لها من السحب المتحركة عبر الشاشة، هناك بعض العناصر الأساسية التي يجب معالجتها: التوقيت، والاتجاه، وكيفية إدارة العروض. أحد أهم العوامل في جعل الرسوم المتحركة الخاصة بك سلسة هو التعامل مع عروض الصور بكفاءة حتى لا تختفي أو تتعطل. باستخدام اثنين UIImageView تساعد مثيلات الرسوم المتحركة على ضمان ظهور السحب وكأنها تتحرك باستمرار، حتى عندما تتحرك صورة خارج الشاشة وتحل الأخرى مكانها. من الضروري التأكد من إعادة ضبط الصور بمجرد تجاوزها حافة الشاشة. بدون إعادة التعيين هذه، يمكن أن تنقطع الرسوم المتحركة، مما يتسبب في اختفاء السحب أو ترك فجوات في الحلقة.

جانب آخر مهم من الرسوم المتحركة يتضمن frame.origin.x الخاصية، والتي تستخدم للتحكم في موضع الصور السحابية. من خلال ضبط الوضع الأفقي للصور عند نقاط بداية مختلفة، يمكنك إنشاء وهم الحركة اللانهائية. ومع ذلك، تنشأ مشكلة شائعة عندما تتحرك صورة واحدة خارج الشاشة ولا تتم إعادة تعيينها إلى الموضع الصحيح. الطريقة الصحيحة هي اكتشاف الوقت الذي تجاوزت فيه الصورة حافة الشاشة، ثم إعادة وضعها لتبدأ مرة أخرى على الجانب الآخر. باستخدام كتلة الرسوم المتحركة، يمكنك تحديد رسم متحرك متكرر ومستمر يضمن التدفق المستمر. للتأكد من أن الحركة سلسة، استخدم UIView.animate طريقة مع خيارات مثل .يكرر للحلقات و .curveLinear لسرعة متساوية.

وأخيرًا، فإن تحسين التعليمات البرمجية الخاصة بك من أجل الأداء والسلاسة لا يقل أهمية عن تحقيق التأثير المرئي. يجب عليك تقليل استخدام الذاكرة وتجنب الحسابات غير الضرورية أثناء الرسوم المتحركة. استخدام weak self تساعد المراجع في الرسوم المتحركة المستندة إلى الإغلاق على منع تسرب الذاكرة عن طريق تجنب دورات الاحتفاظ. بالإضافة إلى ذلك، إذا كانت الرسوم المتحركة معقدة أو إذا كنت بحاجة إلى تقنيات أكثر تقدمًا، ففكر في استخدامها CADisplayLink لتحديثات الإطار في الوقت الفعلي، مما يوفر تحكمًا أكبر في توقيت الرسوم المتحركة وسلاسةها. يعد اختبار الرسوم المتحركة على أحجام واتجاهات مختلفة للشاشة أمرًا بالغ الأهمية أيضًا، لأنه يساعد على ضمان عمل الرسوم المتحركة كما هو متوقع عبر جميع الأجهزة. 📱