चिकनी इंटरफ़ेस एनीमेशन (सहजता)

सभी पाठकों को नमस्कार!
मैं आपके साथ अपने एप्लिकेशन या साइट के उपयोगकर्ता इंटरफ़ेस को एनिमेट करने का एक सरल लेकिन प्रभावी तरीका साझा करना चाहता हूं। यह आलेख तैयार किए गए C ++ कोड को प्रस्तुत करता है, जिसका उपयोग मैंने एनिमेटेड स्लाइडर्स के आधार पर iOS और Android एप्लिकेशन को एनिमेट करने के लिए किया था।



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

एनीमेशन स्लाइडर

मिश्रित स्लाइडर एक मिश्रण कंसोल पर पटरियों की तरह दिखते हैं। वास्तव में, स्लाइडर 0.0 से 1.0 तक की संख्या है, जहां 0.0 एनीमेशन की शुरुआत है, और 1.0 इसका अंत है। यह वह संख्या है जिसे गणितीय सूत्र में प्रतिस्थापित किया जाता है। हमें इन स्लाइडर्स की आवश्यकता क्यों है? उनकी आवश्यकता है, क्योंकि आमतौर पर इंटरफ़ेस में कई तत्व होते हैं, सभी को एनीमेशन की आवश्यकता होती है और उनका आंदोलन उसी समय शुरू और समाप्त होना चाहिए। लेकिन एनीमेशन का प्रकार और स्क्रीन पर प्रत्येक तत्व के निर्देशांक अलग-अलग हो सकते हैं।

एनिमेशन के प्रकार

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

स्लाइडर एनीमेशन

#define MAXSLIDES 5 //   #define LOOP_ANIM 1 //   #define FORWBACK_ANIM 2 // - static float slide[MAXSLIDES]={0.0f}; // ,   0.0  1.0 static bool slideback[MAXSLIDES]={false}; // ,     static bool loopback[MAXSLIDES]={false}; //    -,      static void ANIM(int n, float speed=1.0f, bool forw=true, char loop=0){ //n -    //speed -    //forw -     //loop -    if(loopback[n])forw=!forw; //   -         slideback[n]=!forw; //    slide[n]+=fpsf*(forw?speed:-speed); //       ,  fpsf = 1.0/FPS switch(loop){ case LOOP_ANIM: //   if(slide[n]>1.0f)slide[n]-=1.0f; else if(slide[n]<0.0f)slide[n]+=1.0f; break; case FORWBACK_ANIM: // - if(slide[n]>1.0f){ slide[n]=2.0f-slide[n]; loopback[n]=!loopback[n]; }else if(slide[n]<0.0f){ slide[n]=-slide[n]; loopback[n]=!loopback[n]; } break; default: //   0.0  1.0 if(slide[n]>1.0f)slide[n]=1.0f; else if(slide[n]<0.0f)slide[n]=0.0f; break; } } 

इंटरफ़ेस तत्व प्रदर्शित करना

 //  #define LINEAR 0 #define FADEIN 1 #define FADEOUT 2 #define BALL 3 #define SIN 4 #define INCENTER 5 #define FADEBOTH 6 #define FADEBOTH2 7 #define STEPS 8 #define LAMP 9 #define JUMPIN 10 #define JUMPOUT 11 static float A(int n, int type, float s, float e, int typeout=0, float e2=-1000.0f){ // n -    //type -   //s  e -    ,     //typeout -        () //e2 -      () if(n<0){ //       float tmp=s; s=e; e=tmp; n=-n; if(!slideback[n]){ if(typeout)type=typeout; if(e2!=-1000.0f)e=e2; } }else{ //          ,   if(slideback[n]){ if(typeout)type=typeout; if(e2!=-1000.0f)s=e2; } } float x=slide[n]; //    switch(type){ case FADEOUT: x=x*x; break; case FADEIN: x=1.0f-pow(x-1.0f, 2); break; case FADEBOTH: x=pow(sinf(x*M_PI*0.5f), 2); break; case FADEBOTH2: x=pow(sinf(x*M_PI*0.5f), 2); x=pow(sinf(x*M_PI*0.5f), 2); break; case INCENTER: x=tanf(x*2.0f-1.0f)/3.0f+0.5f; break; case BALL:{ float d=sinf((x-1.0f/12.0f)*M_PI*6.0f)*0.65f+0.65f; x=d+sinf(x*M_PI*0.5f)*(1.0fd); }break; case STEPS: x=(int)(x*7.0f)/7.0f; break; case LAMP: x=sinf(pow(expf(1.25fx), 2)*4.0f); if(x>0.0f)x=1.0f; else x=0.0f; break; case JUMPOUT: x=x*x*8.0f/3.0fx*5.0f/3.0f; break; case JUMPIN: x=x-1.0f; x=-x*x*8.0f/3.0fx*5.0f/3.0f+1.0f; break; } //               return s+(es)*x; } 

यह सब कैसे उपयोग करें?

 static void mainLoop(){ //      ANIM(1, 1.0f, showPage); //  №1     ,      ANIM(2, 2.0f, true, LOOP_ANIM); //  №2    ,      //   glColor4f(1.0f, 1.0f, 1.0f, A(1, FADEIN, 0.0f, 1.0f)); DrawSomeImage(width/2, A(1, BALL, -150, height/2, FADEIN, height+200)); DrawOtherImage(A(2, INCENTER, -150, width+150), 100); } 

DrawSomeImage (चौड़ाई / 2, A (1, BALL -100, ऊंचाई / 2, FADEIN, ऊंचाई + 100));
एक निश्चित चित्र यहाँ प्रदर्शित है, मान लें कि यह एक लोगो है। एक्स अक्ष पर, यह स्क्रीन के बीच में प्रदर्शित होता है, और हमारे पास एक एनिमेटेड है। आइए प्रत्येक पैरामीटर का विश्लेषण करें:
1 - स्लाइडर नंबर 1 का उपयोग करें
बल्ल - एनीमेशन जैसे "बॉल", लोगो को स्क्रीन के ऊपर से कूदना चाहिए-100 वाई में प्रारंभिक समन्वय है अर्थात्। स्क्रीन बंद करें
ऊँचाई / 2 - स्क्रीन के मध्य में लंबवत रूप से इसका मतलब है कि इसे रोकना आवश्यक होगा
शेष पैरामीटर वैकल्पिक हैं, लेकिन फिर जब पृष्ठ लोड होता है, तो लोगो ऊपर से कूद जाएगा, जो कार्बनिक दिखता है, लेकिन जब इसे बाहर निकलने की आवश्यकता होती है, तो गेंद का एनीमेशन प्राकृतिक नहीं दिखेगा। इसलिए, हम रिवर्स एनीमेशन के प्रकार को सेट करते हैं ताकि इसे त्वरण के साथ सुचारू रूप से हटा दिया जाए अर्थात्। FADEIN ।
निजी तौर पर, मुझे यह अच्छा लगता है जब लोगो नीचे उड़ता है और वापस नहीं जाता है, इसलिए हम पूछते हैं कि यह कहाँ से उड़ जाएगा यानी। ऊंचाई + 100 ।
इस उदाहरण में लोगो को दिखाया गया है।

हम इस तस्वीर की पारदर्शिता को भी आसानी से बदलते हैं:
glColor4f (1.0f, 1.0f, 1.0f, A (1, FADEIN, 0.0f, 1.0f));
हम पारदर्शिता और निर्देशांक दोनों को समान रूप से बदलने के लिए समान 1 स्लाइडर का उपयोग करते हैं। हालाँकि, हम FADEIN (त्वरण के साथ) में एनीमेशन का प्रकार सेट करते हैं और पारदर्शिता को 0.0 से 1.0 तक बदलते हैं।

ड्राऑइटरइमेज (ए (2, इंसेटर, -150, चौड़ाई + 150), 100);
इस मामले में, तस्वीर पूरी स्क्रीन के बाईं ओर से दाईं ओर उड़ जाएगी, जबकि यह आसानी से बीच में झुक जाएगी।
2 - हम स्लाइडर नंबर 2 का उपयोग करते हैं, जो कि साइकल नंबर 1 के रूप में तेजी से और दो बार खेला जाता है।
INCENTER - एक सूत्र जिसके अनुसार चित्र स्क्रीन के बीच में थोड़ा सा झुकता है-150 - एक्स पर प्रारंभिक समन्वय
चौड़ाई + 150 - अंतिम एक्स समन्वय

एक और उदाहरण

  glColor4f(1.0f, 1.0f, 1.0f, A(1, FADEBOTH, 0.0f, 1.0f)); DrawSomeImage1(); glColor4f(1.0f, 1.0f, 1.0f, A(-1, FADEBOTH, 0.0f, 1.0f)); DrawSomeImage2(); 

जैसा कि आप देख सकते हैं, हम अलग-अलग पारदर्शिता के साथ दो चित्र प्रदर्शित करते हैं। दोनों बार हम स्लाइडर नंबर 1 का उपयोग करते हैं और एनीमेशन का उपयोग एक सहज शुरुआत और अंत के साथ करते हैं। स्लाइडर संख्या में केवल चिह्न अलग है। -1 का मतलब है कि यह एनीमेशन उल्टा हो जाएगा और स्लाइडर 1.0 होने पर छिप जाएगा, और 0.0 के बराबर स्लाइडर के साथ बाहर निकल जाएगा। नेत्रहीन, ये दोनों चित्र आसानी से एक दूसरे को बदल देंगे।

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

अद्यतन

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

संबंधित पुस्तकालयों के लिए लिंक
Tweener
उद्देश्य-सी लाइब्रेरी
लिंक के लिए धन्यवाद nukie और Agent_Smith