छद्म 3 डी प्रभाव

हाल ही में, उन्होंने उन कार्यक्रमों के विज्ञापनों पर ध्यान आकर्षित किया जिनमें तथाकथित छद्म 3 डी प्रभाव को लागू किया जाता है: जब फोन के सापेक्ष उपयोगकर्ता की स्थिति के आधार पर आवेदन की तस्वीर बदल जाती है। या उपयोगकर्ता के बारे में एक फोन: आप किस पक्ष पर निर्भर हैं :)। इस प्रभाव को प्राप्त करने के लिए, आप या तो सेंसर का उपयोग कर सकते हैं या उपयोगकर्ता की आंखों की स्थिति (तथाकथित हेड ट्रैकिंग) को ट्रैक कर सकते हैं। दूसरी विधि कुछ अधिक जटिल है, हालांकि यह अधिक प्रशंसनीय परिणाम देता है।

एक प्रयोग के रूप में, हमने डिलक्स मून प्रो कार्यक्रम में इस तरह की 3 डी पृष्ठभूमि बनाने की कोशिश करने का फैसला किया (बाजार पर संस्करण में, यह प्रभाव अभी तक लागू नहीं हुआ है!)।

यहाँ एक उदाहरण है जो हमें मिला:


तो चलिए शुरू करते हैं।

3 डी प्रभाव को प्राप्त करने के लिए, छवि को "परतों" में विभाजित करना आवश्यक है और, एक्सेलेरोमीटर के आधार पर, प्रत्येक परत को एक निश्चित राशि द्वारा स्थानांतरित करें।

यह सरल प्रतीत होता है, लेकिन कई समस्याएं हैं।

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

इस प्रकार, इस समस्या को हल करने का सामान्य तरीका इस प्रकार है:

  1. पृष्ठभूमि को कई परतों में तोड़ें जो एक दूसरे के सापेक्ष स्थानांतरित हो जाएंगे। यह "गहराई" देने के लिए बनाया गया पाठ, पृष्ठभूमि चित्र या विशेष तत्व हो सकते हैं
  2. एक्सेलेरोमीटर घटनाओं के लिए सदस्यता लें।
  3. एक्सेलेरोमीटर बदलते समय:
  4. प्रारंभिक मूल्यों के सापेक्ष सही सेंसर प्रदर्शन।
  5. चिकना हाथ हिला
  6. प्रत्येक परत को अपने आकार में बदलें।
  7. सेंसर को वैकल्पिक बनाएं: सभी उपयोगकर्ता इस आश्चर्य को पसंद नहीं कर सकते हैं।

तो, हमारे मामले में, हमारे पास पृष्ठभूमि की छवि है, + तारों की 2 परतें, विभिन्न स्क्रीन तत्वों की परतें।

फ़िल्टरिंग आवश्यकताओं के लिए, हम कुछ स्थिरांक निर्धारित करते हैं:
#define kUpdateFrequency 240.0 //   #define kCutoffFrequency 5.0 //  #define kAccDataScale 2.2 //  

जब कार्यक्रम शुरू होता है, तो हम हैंड-शेक के कारण होने वाली पृष्ठभूमि के झुनझुने को हटाने के लिए कम-पास फिल्टर को इनिशियलाइज़ करते हैं।
आप उसके बारे में यहाँ पढ़ सकते हैं
और यहां Apple से एक उदाहरण कार्यान्वयन डाउनलोड करें
 -(void)awakeFromNib { filter = [[LowpassFilter alloc] initWithSampleRate:kUpdateFrequency/10 cutoffFrequency:kCutoffFrequency]; //    if ([Options instance].useSensors) { [self performSelector:@selector(startAcc) withObject:nil afterDelay:4]; //              } [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didGoToBG:) name:UIApplicationDidEnterBackgroundNotification object:nil]; //    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didResume:) name:UIApplicationDidBecomeActiveNotification object:nil]; //   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(useSensorsChanged) name:@"useSensors" object:nil]; //    } 

मुझे नहीं लगता कि 3D पृष्ठभूमि प्रभाव को चालू / बंद करने के लिए विकल्प को बदलने और पृष्ठभूमि को कार्यक्रम को कम करने के लिए प्रतिक्रिया को वर्णन करने के लायक है, सब कुछ कॉर्नी है

अब उस फ़ंक्शन पर विचार करें जो इस सभी सौंदर्य को लॉन्च करता है
PS एआरसी द्वारा उपयोग किया जाता है क्योंकि कोई अनुरक्षण या जारी नहीं करता है
 -(void)startAcc { @try { if (!acc) { startY = 100; //     Y          acc = [UIAccelerometer sharedAccelerometer]; acc.updateInterval = 1/kUpdateFrequency; acc.delegate = self; } } @catch (NSException *exception) { NSLog(@"startAcc %@",exception); } } 

इस पूरी बात को रोकने के लिए
 -(void)stopAcc { @try { if (acc) { acc.delegate = nil; acc = nil; [self resetState]; } } @catch (NSException *exception) { NSLog(@"stopAcc %@",exception); } } 

तब हम केवल एक्सेलेरोमीटर अद्यतन घटना को पकड़ सकते हैं
 - (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration { @try { [filter addAcceleration:acceleration]; //    «»  double x = filter.x*kAccDataScale; //  double y = filter.y*kAccDataScale; if (startY == 100) { startY = acceleration.y*kAccDataScale; //     Y } //    X if (x > 1) { x = 1; } else if (x < -1) { x = -1; } //    Y if (y > 1) { y = 1; } else if (y < -1) { y = -1; } //    y = (y - startY); //   [self setOffsetElementForX:x Y:y]; } @catch (NSException *exception) { NSLog(@"accelerometer %@",exception); } } @end 

और अंत में, शिफ्ट फ़ंक्शन में, हम अलग-अलग परतों को एक अलग निश्चित राशि से स्थानांतरित करते हैं। इसलिए, ऊपरी तत्व पृष्ठभूमि की तुलना में कम गति पर चलते हैं, जो 3 डी प्रभाव बनाता है। इस मामले में, सभी तत्वों को डिवाइस के रोटेशन की ओर स्थानांतरित किया जाना चाहिए।
 -(void)setOffsetElementForX:(double)x Y:(double)y { @try { allEll.transform = CGAffineTransformMakeTranslation(-8.5*x, 11.5*y); movingButtonsView.transform = CGAffineTransformMakeTranslation(-8.5*x, 11.5*y); arcView.transform = CGAffineTransformMakeTranslation(-8.5*x, 11.5*y); bgView.transform = CGAffineTransformMakeTranslation(-17*x, 23*y); bgStar1View.transform = CGAffineTransformMakeTranslation(-13*x, 18*y); bgStar2View.transform = CGAffineTransformMakeTranslation(-10*x, 13*y); allEll2.transform = CGAffineTransformMakeTranslation(-17*x, 21*y); } @catch (NSException *exception) { NSLog(@"offsetElementForX %@",exception); } } 

ये 4 सरल कदम कार्यक्रमों को और अधिक आकर्षक, दिलचस्प और अभिनव बनाएंगे। 21 वीं सदी के बाद। याद रखें कि एक शानदार और स्टाइलिश डिजाइन समीक्षकों द्वारा आपके आवेदन के मूल्यांकन को सकारात्मक रूप से प्रभावित कर सकता है, साथ ही उन्हें सैकड़ों हजारों प्रतियोगियों से अलग कर सकता है। हम लाइफवेयर सॉल्यूशंस (http://www.lifewaresolutions.com/) पर सक्रिय रूप से शोध में लगे हुए हैं और अगर हमारा अनुभव आपके लिए उपयोगी है तो हमें खुशी होगी। मैं आपकी प्रतिक्रिया के लिए बहुत आभारी रहूंगा।

Source: https://habr.com/ru/post/In162081/


All Articles