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

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

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

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

यह सिर्फ इतना हुआ कि पिछले दिसंबर में मुझे निम्नलिखित विवरण के साथ एक बहुत ही दिलचस्प टिकट सौंपा गया था



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

हमेशा की तरह एक स्केच फ़ाइल मेरे टिकट से जुड़ी थी और सौभाग्य से एक डिज़ाइन था जो इस तरह दिखता था:



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

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

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

यह इश्कबाज में छप एनीमेशन है क्योंकि Radek ने इसे लागू किया। साफ!



और यहाँ स्नोफ्लेक्स एनीमेशन है जो मैंने शीर्ष पर बनाया था। जानना चाहते हैं कि मैंने यह कैसे किया? पढ़ते रहिए।

कण प्रणाली

एनिमेशन के बारे में कुछ दिलचस्प दस्तावेज पढ़ने के बाद मुझे याद दिलाया गया कि 'कण प्रणाली' फिल्मों और वीडियो गेम में इस तरह के एनीमेशन को प्राप्त करने के लिए एक सामान्य तकनीक है।

विकिपीडिया इसका पूरा वर्णन करता है:

"एक कण प्रणाली गेम भौतिकी, गति ग्राफिक्स और कंप्यूटर ग्राफिक्स में एक तकनीक है जो कुछ प्रकार के" फजी "घटना को अनुकरण करने के लिए बहुत छोटे स्प्राइट्स, 3 डी मॉडल, या अन्य ग्राफिक वस्तुओं का उपयोग करती है, जो अन्यथा बहुत कठिन हैं पारंपरिक प्रतिपादन तकनीकों के साथ पुन: पेश करें - आमतौर पर अत्यधिक अराजक प्रणाली, प्राकृतिक घटनाएं या रासायनिक प्रतिक्रियाओं के कारण होने वाली प्रक्रियाएं। ”

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

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

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

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

जब इन सभी छवियों को कण प्रणाली द्वारा एक साथ उत्सर्जित किया जाता है, तो यह आश्चर्यजनक एनिमेशन बनाता है जो बारिश, आग या बर्फ की तरह दिखता है!

पर हाथ

मैंने अनुमान लगाया कि Apple ने शायद अपने कुछ एपीआई में कण प्रणालियों के लिए समर्थन की पेशकश की है। मैंने जाँच की और, हाँ, मैं सही था!

कण प्रणाली आईओएस में कोर एनिमेशन का हिस्सा है और मुझे CAEmitterLayer और CAEmitterCell में इसके बारे में अच्छा प्रलेखन मिला।

एक बार जब मुझे आईओएस में कण प्रणालियों और समर्थित एपीआई के बारे में पूरी जानकारी थी, तो मैंने अपने पसंदीदा हिस्से पर शुरुआत की, वास्तव में अपने स्नोफ्लेक्स एनीमेशन के लिए कोड लागू किया।

अफसोस की बात यह है कि क्रिसमस हमेशा के लिए खत्म नहीं होने वाला था, इसलिए इसकी उपस्थिति को दूर से नियंत्रित करने की जरूरत थी ताकि इसे 25 दिसंबर के बाद हटाया जा सके।

जैसा कि मैंने पहले बताया, लॉटी में ऐप स्टार्टअप एनीमेशन लागू किया गया था। तब मुझे यह पता लगाना था कि मौजूदा कोड को बाधित किए बिना मौजूदा एनीमेशन में स्नोफ्लेक्स को कैसे जोड़ा जाए क्योंकि यह रिलीज होने के कुछ समय बाद हटाया जाना था।

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



ऊपर दिए गए चित्र उन दृश्यों को दिखाते हैं जो अंतिम एनीमेशन में उपयोग किए गए थे।

1. कण प्रणाली एनीमेशन युक्त दृश्य ; मूल रूप से, बर्फ के टुकड़े
   
2. लोगो को चेतन करने के लिए उपयोग किए जाने वाले विचार : लोटी का उपयोग करते हुए एनिमेटेड।
   

एक बार जब यह समस्या हल हो गई, तो मुझे अविश्वसनीय, एनिमेटेड स्नोफ्लेक्स उत्पन्न करने के लिए कण उत्सर्जकों के लिए तर्क युक्त एक पुन: प्रयोज्य यूआईवीयूवाई क्लास बनाने की आवश्यकता थी।

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

प्रत्येक स्नोफ्लेक सिर्फ एक बड़ा, सफेद सर्कल है जो एक और बड़े, धुंधले सफेद सर्कल के साथ युग्मित है। मैंने उन्हें स्केच का उपयोग करके खुद बनाया।

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

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

मैंने अपना एनीमेशन emitter लेयर बनाकर शुरू किया:

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

मुझे अपनी परत सेटअप करने के लिए केवल तीन गुणों की आवश्यकता थी:

• emitterShape : यह परत के आकार को परिभाषित करता है। मेरे मामले में, मैंने रैखिक आकार का उपयोग किया क्योंकि यह सभी स्क्रीन पर बर्फ के टुकड़ों को सही ढंग से स्थानांतरित करने की अनुमति देगा
  

• शुरुआती समय : यह संपत्ति CAMediaTiming प्रोटोकॉल का एक हिस्सा है और उस समय का प्रतिनिधित्व करता है जब एनीमेशन को परत में जोड़ने के बाद परत नेत्रहीन दिखाई देगी।
  

• टाइमऑफ़सेट : वांछित प्रभाव एनीमेशन की शुरुआत से पूरी स्क्रीन पर बर्फ के टुकड़े को देखने के लिए था। यह संपत्ति कैमीडिया टाइमिंग प्रोटोकॉल का एक हिस्सा है और मूल रूप से एनीमेशन के लिए एक फास्ट फॉरवर्ड की तरह कार्य करता है। मैंने 10.0 सेकंड का मान निर्धारित किया है, जो एनीमेशन को प्रभावी ढंग से आगे बढ़ा सकता है और स्क्रीन को स्नोफ्लेक्स के साथ कवर कर सकता है (क्या मैंने 0.0 सेकंड का मान निर्धारित किया है, तो बर्फ के टुकड़े ऊपर से धीरे-धीरे गिरने लगेंगे और पूरे कवर करने में कुछ समय लगेगा। स्क्रीन।
  

एमिटर परत तैयार करने के बाद, मैंने फिर 2 अलग-अलग एमिटर सेल बनाए। परिपत्र के लिए पहला एक, "भारी" स्नोफ्लेक्स और दूसरा "लाइटर" स्नोफ्लेक्स का प्रतिनिधित्व करता है।

"भारी" स्नोफ्लेक प्रभाव के लिए मैंने इस एमिटर सेल का उपयोग किया:

 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 अधिकतम आकार का होना चाहिए। रेंज एक ही समय में उत्सर्जित कणों के बीच आकार में भिन्नता को परिभाषित करता है, जो विभिन्न आकारों की यादृच्छिक कोशिकाओं की अनुमति देता है
  

• वेग और वेग : निकला हुआ किनारा सेल के प्रारंभिक वेग को परिभाषित करता है। यह वेग से निर्दिष्ट रेंज के भीतर बेतरतीब ढंग से बदलता है
  

• स्पिन और स्पिनरेंज : ये घूर्णी वेग को परिभाषित करते हैं, प्रति सेकंड रेडियन में मापा जाता है, और स्पिनरेंज संपत्ति द्वारा निर्दिष्ट सीमा के भीतर एक यादृच्छिक राशि से भिन्न होता है।
  
• yAcceleration और xAcceleration : सेल पर लागू त्वरण वेक्टर के घटक
  

मुझे नरम बर्फ़ बनाने के लिए एक दूसरे एमिटर की भी ज़रूरत थी। इस एमिटर के लिए, मुझे केवल दो को छोड़कर सभी संपत्तियों के लिए समान मान सेट करना था:

• सामग्री : इस मामले में यह एक बड़ी, धुंधली गोलाकार छवि संपत्ति होगी
  
• वेग : एक हल्के हिमपात का प्रवाह अनुकरण करने के लिए, मैंने 'गिरने' की गति को धीमा कर दिया
  

 let blurryFlakeEmitterCell = CAEmitterCell() blurryFlakeEmitterCell.contents = UIImage(named: "snowflake_blurry_dot")?.cgImage blurryFlakeEmitterCell.velocity = 40 ... // the rest of the properties has the same values as "flakeEmitterCell" 

बाकी सब बहुत आसान था, मुझे बस परत और कोशिकाओं को एक साथ जोड़ने की जरूरत थी। परिणाम!

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

निष्कर्ष

स्नोफ्लेक एनीमेशन के लिए काम कर रहे समाधान के लिए मुझे बहुत समय नहीं लगा और अंतिम परिणाम वास्तव में अच्छा लगा। मैं अपने सरल और स्वच्छ कार्यान्वयन के साथ डिजाइनरों के पास गया और उन्होंने इसे पसंद किया।

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

कणों उत्सर्जकों के बारे में विस्तारित जानकारी

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