CSS3 एनीमेशन - बेज़ियर कर्व का उपयोग कर उछाल प्रभाव के साथ एक फैन-आउट बनाना

क्या आप यह जानते थे ज्यामितीय परिवर्तन के साथ HTML तत्वों को जोड़ा गया परिवर्तनसीएसएस प्रॉपर्टी जैसे स्केल, स्क्यू और रोटेट एनिमेटेड हो सकते हैं? वे का उपयोग कर एनिमेटेड किया जा सकता है संक्रमण संपत्ति और @keyframes एनिमेशन, लेकिन यहां तक ​​कि कूलर भी है कि एनिमेटेड परिवर्तनों को एक छोटे से जोड़ के साथ एक पायदान ऊपर ले जाया जा सकता है उछाल प्रभाव, का उपयोग करते हुए क्यूबिक-बेज़ियर () समय समारोह.

संक्षेप में, क्यूबिक-बेज़ियर () (CSS में) a है संक्रमण के लिए समय समारोह. यह संक्रमण की गति को निर्दिष्ट करता है, और अन्य चीजों के बीच भी इसका उपयोग किया जा सकता है एनिमेशन में उछल प्रभाव पैदा करते हैं.

इस पोस्ट में, सबसे पहले हम जा रहे हैं एक साधारण रूपांतरण एनीमेशन बनाएँ जिसे बाद में हमने एक जोड़ें क्यूबिक-बेज़ियर () समय समारोह. इस ट्यूटोरियल के अंत में, आप समझेंगे कि एनीमेशन का उपयोग कैसे किया जाता है एक प्रशंसक और उछाल प्रभाव दोनों. यहाँ अंतिम परिणाम है (प्रभाव देखने के लिए क्लिक करें).

डेमो क्रिस्टोफर जोन्स द्वारा एक एनिमेटेड स्थान मार्कर के बारे में इस खूबसूरत ड्रिबल शॉट से प्रेरित है.

1. पत्तियाँ बनाना

स्थान मार्कर का आकार पांच से बना है (चलो उन्हें कॉल करें) पत्ते। बनाने के लिए अंडाकार एक पत्ते की, चलो का उपयोग करें बॉर्डर-त्रिज्या सीएसएस संपत्ति। बॉर्डर-त्रिज्या एक कोने का है दो राडियों से बना है, क्षैतिज और ऊर्ध्वाधर, जैसे नीचे दिखाया गया है.

बॉर्डर-त्रिज्या संपत्ति में कई अलग-अलग वाक्यविन्यास हैं। हम मार्कर के आकार के लिए अधिक जटिल एक का उपयोग करेंगे:

 सीमा-त्रिज्या: htl htr hbr hbl / vtl vtr vbr vbl; 

इस वाक्यविन्यास में, क्षैतिज और ऊर्ध्वाधर त्रिज्या को एक साथ रखा गया है; ज और v क्षैतिज और ऊर्ध्वाधर त्रिज्या का प्रतिनिधित्व करते हैं, और टी, एल, ख और आर शीर्ष, बाएं, नीचे और दाएं कोनों का प्रतिनिधित्व करें। उदाहरण के लिए, VBL नीचे-बाएँ कोने के ऊर्ध्वाधर त्रिज्या के लिए खड़ा है.

यदि आप देते हैं तो केवल एक मूल्य क्षैतिज या ऊर्ध्वाधर पक्ष के लिए, उस मान को ब्राउज़र द्वारा अन्य सभी क्षैतिज या लंबवत राडियों में कॉपी किया जाएगा.

सेवा मेरे एक ऊर्ध्वाधर अंडाकार आकृति बनाएं, क्षैतिज त्रिज्या को रखें 50% सभी कोनों के लिए, और ऊर्ध्वाधर लोगों को समायोजित करें, जब तक कि वांछित आकार नहीं देखा जाता है। क्षैतिज पक्ष केवल एक मूल्य का उपयोग करेगा: 50%.

ऊर्ध्वाधर त्रिज्या ऊपर-बाएँ और ऊपर-दाएँ कोने होंगे 30%, जबकि नीचे-बाएँ और नीचे-दाएँ कोने का उपयोग करेगा 70% मूल्य.

एचटीएमएल

सीएसएस

.pinStarLeaf चौड़ाई: 60px; ऊंचाई: 120 पीएक्स; सीमा-त्रिज्या: 50% / 30% 30% 70% 70%; पृष्ठभूमि-रंग: # B8F0F5; 

2. पत्तियों को गुणा करना

चूंकि मार्कर पांच पत्तों को दिखाते हुए पंखा करेगा, हम बनाते हैं पत्ती की चार और प्रतियां विभिन्न रंगों में, और उन्हें एक दूसरे पर स्टैक करने के लिए पूर्ण स्थिति के साथ.

एचटीएमएल

सीएसएस

#pinStarWrapper चौड़ाई: 300px; ऊंचाई: 300 पीएक्स; स्थिति: रिश्तेदार;  .pinStarLeaf चौड़ाई: 60px; ऊंचाई: 120 पीएक्स; स्थिति: निरपेक्ष; सीमा-त्रिज्या: 50% / 30% 30% 70% 70%; बायां: 0; सही: 0; शीर्ष: 0; नीचे: 0; मार्जिन: ऑटो; अपारदर्शिता: .5;  .pinStarLeaf: nth-of-type (1) बैकग्राउंड-कलर: # B8F0F5;  .pinStarLeaf: nth-of-type (2) बैकग्राउंड-कलर: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) बैकग्राउंड-कलर: # 94F3B0;  .pinStarLeaf: nth-of-type (4) बैकग्राउंड-कलर: # D2F8A1;  .pinStarLeaf: nth-of-type (5) बैकग्राउंड-कलर: # F3EDA2;  

3. कैप्चर इवेंट पर क्लिक करना और सौंदर्यशास्त्र में सुधार करना

चलो एक चेकबॉक्स जोड़ें उसके साथ #pinStarCenterChkBox क्लिक इवेंट पर कब्जा करने के लिए पहचानकर्ता। जब चेकबॉक्स की जाँच की जाती है, तो पत्ते बाहर निकलेंगे (घूमेंगे)। हमें भी एक जोड़ने की जरूरत है सफेद घेरा उसके साथ #pinStarCenter सौंदर्यशास्त्र के लिए पहचानकर्ता। यह मार्कर के शीर्ष पर स्थित होगा, और यह स्थान मार्कर का केंद्र टुकड़ा होगा.

एचटीएमएल

हम चेकबॉक्स को पहले रखते हैं, और उसके बाद सफेद सर्कल, पत्ते:

सीएसएस

सबसे पहले, हम चेकबॉक्स और कवरिंग सर्कल के लिए मूल शैलियों को निर्धारित करते हैं:

 #pinStarCenter, #pinStarCenterChkBox चौड़ाई: 45px; ऊंचाई: 50 पीएक्स; स्थिति: निरपेक्ष; बायां: 0; सही: 0; शीर्ष: -60 पीएक्स; नीचे: 0; मार्जिन: ऑटो; पृष्ठभूमि-रंग: # एफ; सीमा-त्रिज्या: 50%; कर्सर: सूचक;  #pinStarCenter, .pinStarLeaf सूचक-घटनाएँ: कोई नहीं;  #pinStarCenter> इनपुट [प्रकार = "चेकबॉक्स"] चौड़ाई: 100%; ऊंचाई: 100%; कर्सर: सूचक;  

जैसा कि प्रत्येक पत्ती z- अक्ष के साथ घूमेगी अलग-अलग कोणों में, हमें सेट करने की आवश्यकता है रूपांतर: रोटज (); तदनुसार संपत्ति, करने के लिए एक स्टार का आकार बनाएं. हम भी लागू होते हैं संक्रमण संपत्ति रोटेशन प्रभाव के लिए (अधिक सटीक रूप से हम इसका उपयोग करते हैं संक्रमण: परिवर्तन 1s रैखिक पत्तियों के लिए नियम).

 #pinStarCenterChkBox: ~ ~ .StStarLeaf संक्रमण की जाँच की: परिवर्तन 1s रैखिक;  #pinStarCenterChkBox: ~ ~ .StStarLeaf: nth-of-type (5) ट्रांसफॉर्मेशन: रोटेज़ (35deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (4) ट्रांसफॉर्मेशन: रोटेज (105deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (3) ट्रांसफॉर्मेशन: रोटेज (180deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (2) ट्रांस्फ़ॉर्म: रोटेज़ (255deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (1) ट्रांसफॉर्मेशन: रोटेज (325deg);  

यदि आपके पास ऊपर सीएसएस पर एक नज़र है, तो आप की उपस्थिति से देख सकते हैं #pinStarCenterChkBox: ~ चेक किया गया सामान्य भाई-बहन का चयनकर्ता जिसे हम केवल जोड़ते हैं संक्रमण तथा परिवर्तन गुण जब चेकबॉक्स की जाँच की जाती है (जब उपयोगकर्ता ने मार्कर पर क्लिक किया).

4. रोटेशन के केंद्र को संशोधित करना

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

रोटेशन प्रभाव को ठीक से काम करने के लिए, आइए निम्नलिखित दो नियमों को इसमें जोड़ें .pinStarLeaf हमारी सीएसएस फ़ाइल में चयनकर्ता:

 .pinStarLeaf ट्रांस्फ़ॉर्म-मूल: 30px 30px; संक्रमण: परिवर्तन 1s रैखिक;  

आइए हमारे प्रशंसक को कार्रवाई में एनीमेशन देखें - इस बिंदु पर, अभी तक उछाल प्रभाव के बिना। मार्कर के शीर्ष पर, सफेद सर्कल पर क्लिक करें.

समझना कैसे ubic-Bezier () काम करता है

अब, उछाल प्रभाव को जोड़ने के लिए, हमें बदलने की आवश्यकता है रैखिक समय समारोह के साथ क्यूबिक-बेज़ियर () में संक्रमण हमारे सीएसएस फ़ाइल में घोषणाएँ.

लेकिन पहले, आइए समझते हैं तर्क के पीछे क्यूबिक-बेज़ियर () समय समारोह ताकि आप आसानी से उछाल प्रभाव का एहसास कर सकें.

के लिए वाक्यविन्यास क्यूबिक-बेज़ियर () फंक्शन निम्नलिखित है, घ तथा टी कर रहे हैं दूरी तथा पहर, और उनके मूल्य आम तौर पर 0 और 1 के बीच होते हैं:

क्यूबिक-बेज़ियर (टी 1, डी 1, टी 2, डी 2)

हालांकि सीएसएस की व्याख्या करते हुए क्यूबिक-बेज़ियर () दूरी और समय के संदर्भ में सटीक नहीं है, इसे इस तरह समझना बहुत आसान है.

वहाँ मान लें एक बॉक्स जो बिंदु A से B तक जाता है 6 सेकंड में। चलो निम्नलिखित का उपयोग करें क्यूबिक-बेज़ियर () के साथ संक्रमण के लिए समय समारोह t1 = 0 तथा डी 1 = 1 मान.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / घन-बेज़ियर (0,1,0,0) 

लगभग कोई समय में, बॉक्स A से मध्य-बिंदु तक जाता है, और B तक पहुँचने में शेष समय लेता है.

मूल्यों के साथ एक ही संक्रमण की कोशिश करते हैं t1 = 1 तथा d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / क्यूबिक-बेज़ियर (1,0,0,0) 

पहले तीन सेकंड के लिए, बॉक्स ज्यादा हिलता नहीं है, और बाद में यह लगभग मध्य-बिंदु पर कूद जाता है, और बी की ओर तेजी से बढ़ना शुरू कर देता है.

जैसा कि आप देख सकते हैं, d1 नियंत्रित करता है A के बीच की दूरी और मध्य बिंदु, तथा t1 A से मध्य-बिंदु तक पहुंचने में समय लगता है.

का उपयोग करते हैं d2 तथा t2 अभी व। दोनों t1 तथा d1 1 होगा, और t2 = 1 तथा d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / घन-बेज़ियर (1,1,0,1) 

बॉक्स 3 सेकंड में (लगभग के कारण) लगभग आधा चलता है t1 = 1, डी 1 = 1), और कुछ ही समय में यह बिंदु B पर कूद जाता है.

अंतिम उदाहरण पिछले मूल्यों को स्वैप करता है t2 तथा d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / घन-बेज़ियर (1,1,1,0) 

बॉक्स 3 सेकंड में (लगभग के कारण) लगभग आधा चलता है t1 = 1, डी 1 = 1), तो 3 और सेकंड के लिए बिंदु बी पर कूदने से पहले ज्यादा नहीं चलता है.

ये उदाहरण बताते हैं कि d2 तथा t2 दूरी और समय को नियंत्रित करने के लिए यह बॉक्स को लेता है मध्य बिंदु से बिंदु B तक जाएं.

हालाँकि आपको शायद इस लंबे (अभी तक विरल) स्पष्टीकरण की आवश्यकता नहीं थी क्यूबिक-बेज़ियर () इस बिंदु पर, मुझे लगता है कि यह आपको इस फ़ंक्शन को बेहतर ढंग से समझने में मदद करेगा। अब इस सब में उछाल कहाँ से आता है?

5. घन-बेज़ियर के साथ उछाल प्रभाव जोड़ना ()

प्रमुख पैरामीटर उछाल प्रभाव के लिए दूरी हैं, d1 तथा d2. ए d1 का मूल्य 1 से कम बॉक्स लेता है बिंदु A के पीछे एनीमेशन की शुरुआत में B की ओर बढ़ने से पहले.

ए d2 का मूल्य 1 से अधिक बॉक्स लेता है बिंदु बी से परे एनीमेशन के अंत में B पर वापस आने से पहले। इसलिए आगे और पीछे उछाल प्रभाव.

मैं अब जोड़ दूँगा क्यूबिक-बेज़ियर () पूर्व के स्थान पर सीधे हमारे डेमो के मान रैखिक का मूल्य संक्रमण संपत्ति, और आप परिणाम देखते हैं.

 (  

यहां अंतिम परिणाम है, बाउंस इफेक्ट वाला CSS-only फैन-आउट एनीमेशन:

तुलना और उछाल प्रभाव को बेहतर ढंग से समझने के लिए, यहाँ बताया गया है कि कैसे क्यूबिक-बेज़ियर () जब हमारे हमारे उदाहरण बॉक्स पर लागू होता है तो एनीमेशन का मूल्य व्यवहार करता है: