OpenGL के iBooks- जैसे फ्लिपिंग एनीमेशन

मुझे याद है कि जब मैंने पहली बार iPad उठाया था, तो इसके प्राकृतिक पृष्ठ के साथ iBooks ऐप ने मुझे सबसे अधिक प्रभावित किया। अन्य सभी "ट्रिक्स" किसी भी तरह से विशेष रूप से प्रभावशाली नहीं थे, लेकिन यह ... यह पूर्ण अन्तरक्रियाशीलता का अवतार प्रतीत होता था। मानक GUI तत्वों का उपयोग करते हुए पारंपरिक ग्राफिकल इंटरफेस की तुलना में, OpenGL एनिमेशन का उपयोग करने वाले इंटरफेस उपयोगकर्ता इंटरफेस के विकास में एक नया कदम है।

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

तो, OpenGL एनीमेशन और GUI ।
गतिविधि के प्रकार से, मुझे पहले से ही ओपनजीएल का उपयोग करके परियोजनाएं विकसित करनी पड़ीं, इसलिए जब मुझे उन एनिमेशन बनाने की आवश्यकता का सामना करना पड़ा जो कागज के पन्नों को बदलने का अनुकरण करते हैं, तो मेरे पास दो मुख्य कार्य थे:

• शीट प्लेन विरूपण एल्गोरिथ्म
• ओपनजीएल और यूजर इंटरफेस का एकीकरण

इस परियोजना को मुख्य फ्रेमवर्क और ऑब्जेक्टिव-सी भाषा का उपयोग करके MacOS X ऑपरेटिंग सिस्टम के लिए विकसित किया गया था।

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



मैं स्वयं एल्गोरिथ्म और त्रिकोणमिति के विवरण के विवरण में नहीं जाऊंगा। मैं केवल यह कह सकता हूं कि वह शीट प्लेन के किसी भी 2D बिंदु P (x, y) को 3D बिंदु T (x, y, z) में बदलता है, चर मापदंडों A और θ का उपयोग करके। अधिक विवरण चाहने वालों के लिए, iOS और OpenGL-ES के लिए एक परीक्षण परियोजना के स्रोत हैं।

ओपनजीएल और यूजर इंटरफेस एकीकरण
उपयोगकर्ता इंटरफ़ेस में उपयोग की जाने वाली एनीमेशन विधियाँ आमतौर पर निम्न प्रकार से की जाती हैं:

प्रारंभिक अवस्था - एनीमेशन फ़्रेम - अंतिम स्थिति

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

जैसा कि मुड़ने वाले पृष्ठों पर लागू होता है, प्रारंभिक और अंतिम स्थिति पुस्तक के दो लगातार पृष्ठ के अनुरूप होती है।
अर्थात्, एनीमेशन एल्गोरिथ्म निम्नानुसार होना चाहिए:

- वर्तमान पृष्ठ बारी के बनावट को लें
- स्क्रॉल ऑफस्क्रीन पेज
- ऑफस्क्रीन बफर से फैले अगले पेज के टेक्सचर को लें
- ओपन पेज रेंडरर के साथ ब्लॉक पेज फैल गया
- एनीमेशन शुरू करें
- पूरा होने पर, OpenGL रेंडरर छिपाएं और अगला प्रसार दिखाएं, जो ऑफस्क्रीन में स्थित है।

एक OpenGL रेंडरर के रूप में, मैंने एक वर्ग का उपयोग किया
NSOpenGLView, जिसका अपना OpenGL संदर्भ है और इस संदर्भ को प्रबंधित करने के लिए कई सुविधाजनक तरीके हैं।

स्क्रॉल करने की दिशा के आधार पर, रेंडरर को चार पेज टेक्सचर - दो स्टैटिक टेक्सचर और दो डायनामिक टेक्सचर के साथ इनिशियलाइज़ किया गया है, जो उपरोक्त एल्गोरिथ्म का उपयोग करते हुए विकृत है।
पृष्ठ को दाएँ से बाएँ मुड़ने पर विचार करें:

वर्तमान प्रसार: बायां पृष्ठ स्थिर है, दायां पृष्ठ गतिशील है।
अगला प्रसार: बाएं पृष्ठ गतिशील है, दायां पृष्ठ स्थिर है।

नीचे नियंत्रक के लिए कोड है जो फ्लिपिंग एनीमेशन को नियंत्रित करता है। कोड सरलीकृत है और नियंत्रण पृष्ठ केवल एक ही दिशा में मुड़ते हैं।

@ कार्यान्वयन PageAnimationController

# छाप चिह्न -
# छाप चिह्न *** एनीमेशन ***

// पृष्ठ रोटेशन
- ( व्यर्थ ) पलटना
{
// पेज टेक्सचर के साथ रेंडरर को इनिशियलाइज़ करें
[ स्वयं तैयार करने वाला ] ;

// एक एनीमेशन टाइमर बनाएं (इस ऑब्जेक्ट के बारे में थोड़ा कम)
// इसे हमारे रेंडर के लिए एक पॉइंटर पास करें
FlipAnimation * एनीमेशन = [ [ FlipAnimation आवंटन ] initWithDuration : 1.0f
एनिमेशनक्राइव : NSAnimationEaseInOut
दृश्य : रेंडरर व्यू ] ;
// इसका मतलब है कि एनीमेशन के दौरान startAnimation बाहर नहीं निकलता है
// समाप्त नहीं हुआ
[ एनीमेशन सेटएनीमेशनब्लॉकिंग : एनएसएनीमेशनब्लॉकिंग ] ;
[ एनीमेशन शुरूअनीमेशन ] ;
[ एनीमेशन रिलीज ] ;

// एनीमेशन रेंडर छुपाने के लिए समाप्त हो गया
[ आत्म समाप्ति ] ;
}

- ( व्यर्थ ) तैयारी करनेवाला
{
// सुनिश्चित करें कि वर्तमान OpenGL संदर्भ चयनित है
[ [ रेंडरर देखें ओपनग्लोनटेक्स्ट ] मेक कॉरंटकॉन्टेक्स ] ;

// पहला पेज टर्न
[ रेंडरर व्यू सेटअनिमेटेडफ़ोर्स : [ स्वयं getPageTexture : PAGE_RIGHT ] ] ;
[ रेंडरर देखें setStaticLeft : [ स्वयं getPageTexture : PAGE_LEFT ] ] ;

// पेज बैकस्टेज फ्लिप
[ bookView flipPageOffScreen ] ;

// अगले पृष्ठ की बारी के बनावट को इनिशियलाइज़ करें
[ रेंडरर व्यू सेटअनिमेटेड बैक : [ स्वयं getPageTexture : PAGE_LEFT ] ] ;
[ रेंडरर देखें setStaticRight : [ स्वयं getPageTexture : PAGE_RIGHT ] ] ;

// अंत में हमारे रेंडरर को दिखाते हैं, वर्तमान यू-टर्न को ओवरलैप करते हुए
// एक ही चित्र वाली किताबें, केवल ओपनजीएल में प्रदान की गई हैं
[ रेंडरर दृश्य सेट किया गया : NO ] ;
}

- ( शून्य ) अंतकरण
{
// OpenGL रेंडरर को छिपाएं
[ रेंडरर दृश्य सेट किया गया : हाँ ] ;
}

@end

मानक एनीमेशन टाइमर। अद्यतन समय कॉल: 0..1 की सीमा में एक रिश्तेदार एनीमेशन समय मूल्य के साथ

@interface FlipAnimation : NSAnimation
{
OpenGLPageCurlView * रेंडरर व्यू;
}
@end


@ क्रियान्वयन FlipAnimation

- ( आईडी ) initWithDuration : ( NSTimeInterval ) अवधि
एनिमेशन : ( NSAnimationCurve )
देखें : ( OpenGLPageCurlView * ) देखें
{
आत्म = [ सुपर initWithDuration : अवधि एनीमेशन कर्व : एनीमेशन कर्व ] ;
अगर ( स्व ! = नील )
{
रेंडरर व्यू = दृश्य;
}
स्व लौट आओ;
}

- ( शून्य ) setCurrentProgress : ( NSAnimationProgress ) प्रगति
{
// रेंडर एनीमेशन, प्रगति मान 0 से 1 तक बदलता है
[ rendererView अद्यतन समय : प्रगति ] ;
}

@end

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

मैं OpenGL रेंडरर कोड प्रदान नहीं करूंगा, क्योंकि यह आम बात है। स्ट्रिप ट्राइएंगल्स द्वारा टेक्सचर मैपिंग की गई थी, एनीमेशन सीन का आकर्षण जोड़ा गया था।
खैर, निष्कर्ष में, यह काम में कैसा दिखता है (मैं गुणवत्ता के लिए माफी चाहता हूं):