आईओएस में स्मूथ लूपिंग एनीमेशन बनाने के लिए छवियों का उपयोग कैसे करें

बादलों को हमेशा के लिए कैसे घुमाएँ: iOS में एक सरल लूपिंग एनीमेशन

आईओएस विकास में, एनिमेशन वास्तव में एक ऐप को जीवंत बना सकते हैं, एक गतिशील और आकर्षक तत्व जोड़ सकते हैं जो उपयोगकर्ताओं को पसंद है। 🌥️ एक सामान्य एनीमेशन जो आप बनाना चाहते हैं वह एक सहज, लूपिंग प्रभाव है, जैसे स्क्रीन पर बादलों को घुमाना। यह सरल लेकिन दिखने में आकर्षक एनीमेशन अक्सर गेम, मौसम ऐप्स और यहां तक ​​कि व्यक्तिगत परियोजनाओं में एक शांत वातावरण बनाने के लिए उपयोग किया जाता है। यदि आप iOS में एनीमेशन में नए हैं, तो आप सोच रहे होंगे कि इसे सहज कैसे बनाया जाए और गड़बड़ियों से कैसे बचा जाए।

एक ऐप खोलने की कल्पना करें और तुरंत स्क्रीन पर बादलों को धीरे-धीरे बहते हुए देखें, जिससे एकदम शांत पृष्ठभूमि बन जाए। स्विफ्ट में `UIImageView` और `UIView` एनिमेशन का उपयोग करके इस प्रकार का प्रभाव प्राप्त किया जा सकता है। मूल विचार एक ही छवि (इस मामले में बादल) को कई बार एनिमेट करना है ताकि वह लगातार घूमता हुआ प्रतीत हो। हालाँकि, यह हमेशा उतना आसान नहीं होता जितना लगता है। एनीमेशन को सुचारू बनाने का प्रयास करते समय डेवलपर्स को अक्सर कुछ कमियों का सामना करना पड़ता है, खासकर जब दोहराई गई छवियों से निपटते हैं।

यदि आपने इस प्रभाव को स्थापित करने का प्रयास किया है और बादलों के गलत दिशा में जाने या गायब होने जैसी समस्याओं का सामना किया है, तो आप अकेले नहीं हैं। ये सामान्य समस्याएं हैं जो गलत फ़्रेम हैंडलिंग या एनीमेशन कॉन्फ़िगरेशन से उत्पन्न होती हैं। लेकिन चिंता न करें—यह मार्गदर्शिका आपको इन समस्याओं को ठीक करने के चरणों के बारे में बताएगी, यह सुनिश्चित करते हुए कि आपका एनीमेशन निर्बाध रूप से काम करेगा। बादलों को एनिमेट करने के मेरे पहले प्रयास की तरह, सही परिणाम प्राप्त करने से पहले आपको कुछ चीजों को समायोजित करने की आवश्यकता हो सकती है। 😅

अब, आइए उन बादलों को एक पूर्ण लूप में घुमाने के समाधान में गोता लगाएँ। दो छवि दृश्यों और थोड़े से एनीमेशन जादू का उपयोग करके, आप एक अंतहीन, तरल गति बनाएंगे जो आपके ऐप को सुचारू और पॉलिश बनाए रखेगी। क्या आप एनीमेशन को ठीक करने और उन बादलों को सही दिशा में घुमाने के लिए तैयार हैं? चल दर!

आईओएस में क्लाउड एनिमेशन स्क्रिप्ट कैसे काम करती है

ऊपर दिए गए स्क्रिप्ट उदाहरण में, लक्ष्य एक सहज, निरंतर क्लाउड एनीमेशन बनाना है जो आईओएस ऐप में असीमित रूप से लूप करता है। मुख्य विचार दो को चेतन करना है UIImageView समान क्लाउड छवि वाले उदाहरण, उन्हें स्क्रीन पर क्षैतिज रूप से घुमाते हुए। यह फ़्रेम का उपयोग करके उनकी स्थिति को समायोजित करके किया जाता है मूल.x संपत्ति और इन पदों पर एनीमेशन लागू करना। दो छवि दृश्यों का उपयोग किया जाता है ताकि जब एक स्क्रीन से बाहर जाता है, तो दूसरा उसकी जगह लेने के लिए तैयार हो जाता है, जिससे एक निर्बाध लूप का प्रभाव पैदा होता है। छवि दृश्यों की गति को एनिमेट करके, आप यह भ्रम दे सकते हैं कि आकाश में बादल लगातार बह रहे हैं। 🚀

आइए कोड के मुख्य घटकों को तोड़ें। पहला कदम दो छवि दृश्य बनाना है, जिनमें से प्रत्येक में बादलों की समान छवि है। इन छवि दृश्यों को स्क्रीन पर एक साथ रखा जाता है, दूसरी छवि का दृश्य वहीं से शुरू होता है जहां पहला दृश्य समाप्त होता है, जिससे एक सतत क्षितिज बनता है। यह सेटअप यह सुनिश्चित करने के लिए महत्वपूर्ण है कि जब पहला छवि दृश्य स्क्रीन के किनारे तक पहुंच जाए, तो दूसरा छवि दृश्य कार्यभार संभालने के लिए तैयार हो। छवि दृश्यों की स्थिति का उपयोग करके नियंत्रित किया जाता है चौखटा संपत्ति, जो मूल दृश्य के भीतर दृश्यों के आकार और स्थिति दोनों को परिभाषित करती है। प्रत्येक छवि दृश्य एक अलग x-स्थिति से शुरू होता है: एक 0 से शुरू होता है, और दूसरा स्क्रीन की चौड़ाई से शुरू होता है।

एक बार छवि दृश्य सेट हो जाने के बाद, अगला कदम उन्हें एनिमेट करना है। यह के साथ किया जाता है UIView.animate फ़ंक्शन, जो समय के साथ दृश्यों को एनिमेट करने के लिए ज़िम्मेदार है। UIView.animate फ़ंक्शन कई पैरामीटर लेता है: एनीमेशन की अवधि, एनीमेशन शुरू होने से पहले कोई देरी, एनीमेशन विकल्प (जैसे एनीमेशन को दोहराना), और लागू किए जाने वाले एनिमेशन का ब्लॉक। इस मामले में, एनीमेशन की अवधि 20 सेकंड पर सेट है, और एनीमेशन का उपयोग करके हमेशा के लिए दोहराने के लिए सेट किया गया है ।दोहराना विकल्प। .वक्ररैखिक विकल्प यह सुनिश्चित करता है कि एनीमेशन एक स्थिर गति से चलता है, जिससे एक सहज, रैखिक गति बनती है। छवियों को ऑफसेट करके क्षैतिज रूप से स्थानांतरित किया जाता है मूल.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
        }
    }
}

आईओएस में निर्बाध क्लाउड एनीमेशन बनाना

आईओएस ऐप में क्लाउड ड्रिफ्ट की तरह एक लूपिंग छवि को एनिमेट करने के लिए दृश्य प्रभावों और प्रदर्शन दोनों पर सावधानीपूर्वक विचार करने की आवश्यकता होती है। जब आप स्क्रीन पर घूमते बादलों का एक अंतहीन चक्र प्राप्त करने का प्रयास कर रहे हैं, तो संबोधित करने के लिए कुछ प्रमुख तत्व हैं: समय, दिशा और दृश्यों को कैसे प्रबंधित किया जाता है। आपके एनीमेशन को सुचारू बनाने में सबसे महत्वपूर्ण कारकों में से एक छवि दृश्यों को कुशलता से संभालना है ताकि वे गायब न हों या अटक न जाएं। दो का उपयोग करना UIImageView एनीमेशन के उदाहरण यह सुनिश्चित करने में मदद करते हैं कि बादल लगातार घूमते हुए दिखाई देते हैं, तब भी जब एक छवि स्क्रीन से हट जाती है और दूसरी उसकी जगह ले लेती है। यह सुनिश्चित करना आवश्यक है कि छवियाँ स्क्रीन के किनारे से आगे बढ़ने के बाद रीसेट हो जाएँ। इस रीसेट के बिना, एनीमेशन टूट सकता है, जिससे बादल गायब हो सकते हैं या लूप में अंतराल रह सकते हैं।

एनीमेशन का एक अन्य महत्वपूर्ण पहलू इसमें शामिल है फ़्रेम.उत्पत्ति.x संपत्ति, जिसका उपयोग क्लाउड छवियों की स्थिति को नियंत्रित करने के लिए किया जाता है। विभिन्न प्रारंभिक बिंदुओं पर छवियों की क्षैतिज स्थिति निर्धारित करके, आप अनंत गति का भ्रम पैदा कर सकते हैं। हालाँकि, एक सामान्य समस्या तब उत्पन्न होती है जब एक छवि स्क्रीन से हट जाती है और सही स्थिति में रीसेट नहीं होती है। सही तरीका यह पता लगाना है कि छवि कब स्क्रीन के किनारे से आगे बढ़ गई है, फिर उसे दूसरी तरफ से शुरू करने के लिए उसकी स्थिति बदलें। एनीमेशन ब्लॉक का उपयोग करके, आप एक दोहराए जाने वाले और निरंतर एनीमेशन को परिभाषित कर सकते हैं जो निरंतर प्रवाह सुनिश्चित करता है। यह सुनिश्चित करने के लिए कि गति सुचारू है, इसका उपयोग करें UIView.animate जैसे विकल्पों के साथ विधि ।दोहराना लूपिंग के लिए और .वक्ररैखिक सम गति के लिए.

अंत में, प्रदर्शन और सहजता के लिए अपने कोड को अनुकूलित करना उतना ही महत्वपूर्ण है जितना कि दृश्य प्रभाव प्राप्त करना। आपको मेमोरी का उपयोग कम से कम करना चाहिए और एनीमेशन के दौरान अनावश्यक गणनाओं से बचना चाहिए। का उपयोग करते हुए weak self क्लोजर-आधारित एनिमेशन में संदर्भ चक्र बनाए रखने से बचकर मेमोरी लीक को रोकने में मदद करते हैं। इसके अतिरिक्त, यदि एनीमेशन जटिल है या यदि आपको अधिक उन्नत तकनीकों की आवश्यकता है, तो उपयोग करने पर विचार करें CADisplayLink रीयल-टाइम फ़्रेम अपडेट के लिए, जो एनीमेशन के समय और सहजता पर अधिक नियंत्रण प्रदान करता है। विभिन्न स्क्रीन आकारों और ओरिएंटेशन पर एनीमेशन का परीक्षण करना भी महत्वपूर्ण है, क्योंकि यह सुनिश्चित करने में मदद करता है कि एनीमेशन सभी उपकरणों पर अपेक्षित रूप से काम करता है। 📱