सभी को नमस्कार!

क्रिसमस लंबे समय से चला गया है, लेकिन इसके बाद हमारे पास एक दिलचस्प कहानी है कि उपयोगकर्ताओं के लिए उत्सव के मूड को बनाने के लिए आमतौर पर उपयोग किए जाने वाले कोर एनीमेशन सुविधा का उपयोग कैसे करें। मैं अपने लंदन के सहयोगी एलेक्सिस के एक लेख का अनुवाद साझा करता हूं।

क्रिसमस हमेशा मेरे लिए साल के सबसे पसंदीदा दिनों में से एक रहा है। यह हमारे जीवन में बहुत सारा प्यार, हँसी, खुशी और जादू लाता है।

मैं स्पेन में पैदा हुआ और उठाया गया, टेनेरिफ़ पर - अफ्रीका के तट पर अटलांटिक महासागर के बीच में एक धूप द्वीप। और, मेरा विश्वास करो, टेनेरिफ़ में क्रिसमस लंदन में क्रिसमस से बहुत अलग है, जहां मैं उनसे पिछले दो वर्षों से मिला था (जब से मैंने काम करना शुरू किया था)।

मेरे लिए लंदन में रहने के लाभों में से एक बर्फ के टुकड़े पर विचार कर रहा था। यहाँ मैंने उन्हें अपने जीवन में पहली बार देखा, यह बस अविश्वसनीय था!

यह याद करते हुए, मैंने आपके साथ एक दिलचस्प कहानी साझा करने का फैसला किया जो क्रिसमस से कुछ समय पहले कार्यालय में मेरे साथ हुआ था, इससे पहले कि मैं अपने परिवार के साथ छुट्टी मनाने के लिए टेनेरिफ़ गया था।

यह सिर्फ इतना हुआ कि मुझे निम्नलिखित विवरण के साथ एक असामान्य कार्य सौंपा गया था:



हम्म, बहुत मज़ेदार। हम अपने iOS एप्लिकेशन में स्नोफ्लेक के साथ क्रिसमस एनीमेशन जोड़ना चाहते थे, और मैं इसे बनाने के लिए भाग्यशाली बन गया। लेकिन मुझे नहीं पता था कि कहां से शुरू करना है।

हमेशा की तरह, एक स्केच फ़ाइल आवश्यक डिज़ाइन के साथ कार्य से जुड़ी हुई थी, जो कुछ इस तरह दिखती थी:



कम से कम मैंने देखा कि हमें क्या चाहिए, लेकिन मुझे पूरी तरह से यकीन नहीं था कि इन स्नोफ्लेक्स को कैसे व्यवहार करना चाहिए। सभी विवरणों को स्पष्ट करने के लिए, मैं डिजाइनरों के साथ बात करने गया।

जैसा कि मुझे संदेह था, उनके पास पहले से ही आफ्टर इफेक्ट्स में एक बेहतरीन एनीमेशन था।

डिजाइनरों ने मुझे समझाया कि वे आवेदन शुरू करने के पहले से ही मौजूद एनीमेशन में ऊपर से गिरने वाले स्नोफ्लेक्स को जोड़ना चाहते थे (साथ ही हमारे लोगो पर सांता टोपी, लेकिन यह तस्वीर का एक सरल प्रतिस्थापन था, इस लेख में उल्लेख के योग्य)।

मुझे पता था कि आईओएस पर एक एप्लिकेशन लॉन्च करने का एनीमेशन लॉटी का उपयोग करके बनाया गया था, क्योंकि इसे कंपनी में शामिल होने के बाद जोड़ा गया था (विवरण Radek Cieciwa द्वारा लेख में पाया जा सकता है)। हालांकि, मैंने डिजाइनरों से कहा कि मैं स्नोफ्लेक्स (लोटी का उपयोग करने की आवश्यकता के बिना) प्रदर्शित करने के लिए सरल समाधान खोजने की कोशिश करूंगा - और विभिन्न दृष्टिकोणों का पता लगाना शुरू कर दिया।

यहाँ एक एनीमेशन मेरे सहकर्मी राडेक द्वारा बनाई गई है। बिल्कुल सही!



और इसलिए मैंने गिरती बर्फ़ को जोड़ा। जानना चाहते हैं कि मैंने यह कैसे किया? इसका जवाब आपको नीचे मिलेगा।

कण प्रणाली

एनिमेशन के बारे में विभिन्न दस्तावेजों को पढ़ते हुए, मुझे याद आया कि खेल और फिल्मों में, कण प्रणाली का उपयोग अक्सर ऐसी समस्याओं को हल करने के लिए किया जाता है।

विकिपीडिया इस अवधारणा का काफी सटीक वर्णन करता है:

"कण प्रणाली कंप्यूटर ग्राफिक्स में उपयोग की जाने वाली एक ऐसी वस्तु है जिसका उपयोग स्पष्ट ज्यामितीय सीमाओं (विभिन्न बादल, निहारिका, विस्फोट, भाप के जेट, मिसाइल से गाड़ियों, धुआं, बर्फ, बारिश, आदि) का प्रतिनिधित्व करने के लिए किया जाता है। कण प्रणालियों को दो-आयामी और तीन-आयामी ग्राफिक्स में लागू किया जा सकता है। "

एक कण प्रणाली में एक या एक से अधिक ग्राफिक आदिम होते हैं, जैसे बिंदु, रेखा या चित्र, जिन्हें कण कहा जाता है। ये कण एक उत्सर्जक द्वारा निर्मित और उत्सर्जित होते हैं जो एक कण प्रणाली का हिस्सा है।

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

जब कण सिस्टम द्वारा उत्सर्जित होते हैं तो एनीमेशन प्रभावी होता है। सिस्टम कण प्रणाली के निर्दिष्ट क्षेत्र के भीतर यादृच्छिक स्थानों पर कणों का उत्सर्जन करता है। यह विभिन्न रूप ले सकता है: सर्कल, आयत, गोला, बॉक्स, रेखा, बिंदु, आदि।

सिस्टम कणों के गुणों को भी निर्धारित करता है जो उनकी ज्यामिति, गति और अन्य मापदंडों को प्रभावित करते हैं। विभिन्न एमिटर एपीआई के समान गुणों के लिए अलग-अलग नाम हैं।

जब कण एक ही समय में सिस्टम द्वारा उत्सर्जित होते हैं, तो वे आश्चर्यजनक एनिमेशन बनाते हैं जो बारिश, आग या बर्फ की तरह दिख सकते हैं।

सिद्धांत से अभ्यास तक

मैंने सोचा था कि एप्पल ने सबसे अधिक संभावना है कि इसके ढांचे में अंतर्निहित कण प्रणाली का समर्थन किया है। और मेरी खोजों के परिणामों से पता चला है कि मैं सही हूं।

कण प्रणाली कोर एनिमेशन ढांचे का हिस्सा है और CAEmitterLayer और CAEmitterCell कक्षाओं में अच्छी तरह से वर्णित है।

आईओएस पर कण प्रणाली और समर्थित एपीआई के बारे में सभी आवश्यक जानकारी का अध्ययन करने के बाद, मैं अपने पसंदीदा हिस्से पर आगे बढ़ गया - हमारे विचार को लागू करना।

दुर्भाग्य से, क्रिसमस हमेशा के लिए नहीं है, इसलिए हमें 25 दिसंबर के बाद दूर से बर्फ के टुकड़े को बंद करने की क्षमता की आवश्यकता थी।

जैसा कि मैंने ऊपर उल्लेख किया है, लॉटी का उपयोग करके एप्लिकेशन लॉन्च एनीमेशन को लागू किया गया था। यही है, मुझे इस तरह से स्नोफ्लेक्स को जोड़ने का एक तरीका खोजने की आवश्यकता थी ताकि यह मौजूदा एनीमेशन और इसके कोड को प्रभावित न करे, क्योंकि रिलीज के तुरंत बाद मेरे समाधान को हटाना पड़ा।

मुझे ऐसा करने का एक बहुत ही सरल तरीका मिला - मैंने मौजूदा एनीमेशन और पृष्ठभूमि के सामने स्नोफ्लेक्स दिखाने के लिए एक नया पारदर्शी UIView जोड़ा और फिर एक ध्वज का उपयोग करके दूर से इसकी उपस्थिति को नियंत्रित किया।



ऊपर दी गई छवि UIView को दिखाती है जिसे अंतिम समाधान में उपयोग किया गया था:

1. एक कण प्रणाली के साथ UIView जो बर्फ के टुकड़े उत्सर्जित करता है।
   
2. लोटी-चालित एप्लिकेशन लॉन्च एनिमेशन में उपयोग किए गए UIViews ।
   

इस समस्या के हल होने के बाद, मुझे एनिमेटेड स्नोफ्लेक्स उत्पन्न करने के लिए कण उत्सर्जन के तर्क वाला एक घटक बनाना पड़ा।

शुरुआत के लिए, मुझे स्नोफ्लेक्स की छवियों की आवश्यकता थी जो मैं एमिटर के लिए सामग्री के रूप में उपयोग कर सकता था। वे बहुत सरल होना चाहिए, है ना?

प्रत्येक स्नोफ्लेक या तो एक साधारण या धुंधला सफेद चक्र था। मैंने उन्हें स्केच में खुद बनाया।

कुछ कार्यान्वयन विवरण

CAEmitterLayer एक विशेष कैलेयर है जो एक कण प्रणाली बनाता है, एनिमेट करता है और रेंडर करता है। यह आपको अपनी ज्यामिति, स्थिति, ड्राइंग मोड और बहुत कुछ नियंत्रित करने की अनुमति देता है।

मैंने एक परत बनाकर एनीमेशन विकसित करना शुरू किया:

snowEmitterLayer.emitterShape = CAEmitterLayerEmitterShape.line snowEmitterLayer.beginTime = CACurrentMediaTime() snowEmitterLayer.timeOffset = 10.0 

मुझे केवल तीन गुणों को बदलने की आवश्यकता थी:

• emitterShape : परत के आकार को परिभाषित करता है। मैंने एक लाइन का उपयोग किया जिससे बर्फ के टुकड़े पूरे स्क्रीन के साथ दिखाई दिए;
  
• startTime : CAMediaTiming प्रोटोकॉल का हिस्सा है और पैरेंट लेयर एनिमेशन के सापेक्ष लेयर एनीमेशन के प्रारंभ समय का प्रतिनिधित्व करता है;
  
• timeOffset : CAMediaTiming प्रोटोकॉल का भी हिस्सा है और संक्षेप में, इसकी शुरुआत के सापेक्ष दिए गए समय के लिए एक फास्ट-फॉरवर्ड एनीमेशन है। मैंने 10 सेकंड का मान निर्दिष्ट किया, जिसके कारण एनीमेशन शुरू होने के समय, बर्फ के टुकड़े पहले से ही पूरी स्क्रीन को कवर करते थे, और वास्तव में हम जो चाहते थे (यदि मैंने 0 सेकंड के लिए मान सेट किया था, तो बर्फ के टुकड़े शीर्ष पर दिखाई देने लगेंगे और स्क्रीन को कवर किया जाएगा। पूरी तरह से केवल कुछ समय के बाद)।
  

एक तैयार परत होने के बाद, मैंने दो अलग-अलग उत्सर्जक बनाए: बर्फ के टुकड़े के लिए भारी और बर्फ के टुकड़े के लिए आसान।

भारी बर्फबारी के लिए, मैंने एमिटर को इस प्रकार स्थापित किया:

 let flakeEmitterCell = CAEmitterCell() flakeEmitterCell.contents = UIImage(named: "snowflake_dot")!.cgImage flakeEmitterCell.emissionRange = .pi flakeEmitterCell.lifetime = 20.0 flakeEmitterCell.birthRate = 30 flakeEmitterCell.scale = 0.15 flakeEmitterCell.scaleRange = 0.6 flakeEmitterCell.velocity = 30.0 flakeEmitterCell.velocityRange = 20 flakeEmitterCell.spin = -0.5 flakeEmitterCell.spinRange = 1.0 flakeEmitterCell.yAcceleration = 30.0 flakeEmitterCell.xAcceleration = 5.0 

जैसा कि आप देख सकते हैं, मुझे कई महत्वपूर्ण गुणों को बदलना पड़ा, जिनमें से प्रत्येक वांछित प्रभाव को प्राप्त करने के लिए बहुत महत्वपूर्ण है:

• सामग्री : CGImage एक स्नोफ्लेक प्रदर्शित करने के लिए उपयोग किया जाता है (जैसा कि आप याद करते हैं, यह उन चित्रों में से एक है, जिन्हें मैंने खुद बनाया है);
  
• emissionRange : शंकु को परिभाषित करने वाले रेडियंस में कोण जिसके अंदर कण दिखाई देंगे (मैंने पीआई कोण चुना ताकि कण पूरे स्क्रीन पर दिखाई दे);
  
• जीवनकाल : एक कण के जीवनकाल को निर्धारित करता है;
  
• जन्मतिथि : हर सेकंड उत्सर्जित कणों की संख्या निर्धारित करता है;
  
• स्केल और स्केलरेंज : कण आकार को प्रभावित करता है, जहां 1.0 का मान अधिकतम आकार है; अंतराल निर्मित कणों के बीच आकार में विचलन को निर्धारित करता है, जो यादृच्छिक आकार के कणों को उत्सर्जित करने की अनुमति देता है;
  
• वेग और वेगRange : कणों की उपस्थिति की गति को प्रभावित करता है; वेग में निर्दिष्ट मूल्य के भीतर बेतरतीब ढंग से विचलन करता है;
  
• स्पिन और स्पिनरेंज : रोटेशन की गति को प्रभावित करते हैं, प्रति सेकंड रेडियन में मापा जाता है, और स्पिनरेंज में निर्दिष्ट मूल्य के भीतर यादृच्छिक विचलन;
  
• yAcceleration और xAcceleration : ये एमिटर पर लागू त्वरण वेक्टर के दो घटक हैं।
  

मुझे हल्के स्नोफ्लेक बनाने के लिए एक दूसरे एमिटर की भी जरूरत थी। सभी गुण अपरिवर्तित रहे, दो के अपवाद के साथ:

• सामग्री : यहाँ मैंने एक धुंधले वृत्त के साथ चित्रों का उपयोग किया है;
  
• वेग : और यहाँ मुझे बर्फ के टुकड़े को हल्का बनाने के लिए गिरने की गति को कम करना पड़ा।
  

 let blurryFlakeEmitterCell = CAEmitterCell() blurryFlakeEmitterCell.contents = UIImage(named: "snowflake_blurry_dot")?.cgImage blurryFlakeEmitterCell.velocity = 40 //      

मैं केवल परत और उत्सर्जकों को जोड़ सकता था, जो बहुत आसान हो गए थे:

 snowEmitterLayer.emitterCells = [flakeEmitterCell, blurryFlakeEmitterCell] self.layer.addSublayer(snowEmitterLayer) 

निष्कर्ष

मैंने जल्दी से गिरते हुए बर्फ के टुकड़े के साथ एक काम करने वाला संस्करण बनाया, जो बहुत अच्छा लग रहा था। इसे लागू करना काफी सरल था और मौजूदा कोड को नहीं बदला। मैंने इसे डिजाइनरों को दिखाया, और वे वास्तव में इसे पसंद करते हैं।

यदि आपके पास सही उपकरण हैं, तो कण प्रणाली के एनिमेशन काफी प्रभावशाली और अपेक्षाकृत आसान हो सकते हैं।

कण प्रणालियों के बारे में अधिक जानकारी निम्नलिखित स्रोतों में पाई जा सकती है:

• विकिपीडिया
• रे वेंडरलिच
• एकता
• एलन मार्टिन कण प्रणालियों पर