इसे चित्रित करें: आप एक नई परियोजना में शामिल होते हैं, कोडबेस में गोता लगाते हैं, और पहले कुछ घंटों के भीतर, आपको कुछ निराशाजनक रूप से परिचित पता चलता है। संपूर्ण स्टाइलशीट में बिखरे हुए, आपको समान मूल एनिमेशन के लिए कई @keyframes परिभाषाएँ मिलेंगी। तीन अलग-अलग फ़ेड-इन प्रभाव, दो या तीन स्लाइड विविधताएं, मुट्ठी भर ज़ूम एनिमेशन, और कम से कम दो अलग-अलग स्पिन एनिमेशन, ठीक है, क्यों नहीं? @कीफ़्रेम्स पल्स { से { पैमाना: 1; } को { पैमाना: 1.1; } }
@कीफ्रेम बड़ा-पल्स { 0%, 20%, 100% { पैमाना: 1; } 10%, 40% { स्केल: 1.2; } }
यदि यह परिदृश्य परिचित लगता है, तो आप अकेले नहीं हैं। विभिन्न परियोजनाओं में मेरे अनुभव में, सबसे लगातार त्वरित जीत में से एक जो मैं प्रदान कर सकता हूं वह है कीफ्रेम को समेकित और मानकीकृत करना। यह इतना विश्वसनीय पैटर्न बन गया है कि अब मैं किसी भी नए कोडबेस पर अपने पहले कार्यों में से एक के रूप में इस सफाई की प्रतीक्षा कर रहा हूं। अराजकता के पीछे का तर्क जब आप इसके बारे में सोचते हैं तो यह अतिरेक एकदम सही समझ में आता है। हम सभी अपने दिन-प्रतिदिन के काम में समान मौलिक एनिमेशन का उपयोग करते हैं: फ़ेड, स्लाइड, ज़ूम, स्पिन और अन्य सामान्य प्रभाव। ये एनिमेशन बहुत सीधे हैं, और काम पूरा करने के लिए त्वरित @keyframes परिभाषा तैयार करना आसान है। एक केंद्रीकृत एनीमेशन प्रणाली के बिना, डेवलपर्स स्वाभाविक रूप से इन कीफ़्रेमों को स्क्रैच से लिखते हैं, इस बात से अनजान कि समान एनिमेशन पहले से ही कोडबेस में कहीं और मौजूद हैं। घटक-आधारित आर्किटेक्चर (जो हम में से अधिकांश आजकल करते हैं) में काम करते समय यह विशेष रूप से आम है, क्योंकि टीमें अक्सर एप्लिकेशन के विभिन्न हिस्सों में समानांतर में काम करती हैं। नतीजा? एनीमेशन अराजकता. छोटी समस्या कीफ़्रेम दोहराव के साथ सबसे स्पष्ट समस्याएं विकास के समय की बर्बादी और अनावश्यक कोड ब्लोट हैं। एकाधिक कीफ़्रेम परिभाषाओं का अर्थ है आवश्यकताएँ बदलने पर अद्यतन करने के लिए एकाधिक स्थान। क्या आपको अपने फीका एनीमेशन का समय समायोजित करने की आवश्यकता है? आपको अपने कोडबेस में प्रत्येक उदाहरण की खोज करनी होगी। सहजता कार्यों को मानकीकृत करना चाहते हैं? सभी विविधताएँ ढूँढ़ने के लिए शुभकामनाएँ। रखरखाव बिंदुओं का यह गुणन सरल एनीमेशन अपडेट को भी समय लेने वाला कार्य बना देता है। बड़ी समस्या यह कीफ़्रेम दोहराव सतह के नीचे छिपी एक बहुत अधिक घातक समस्या पैदा करता है: वैश्विक स्कोप ट्रैप। घटक-आधारित आर्किटेक्चर के साथ काम करते समय भी, सीएसएस कीफ़्रेम को हमेशा वैश्विक दायरे में परिभाषित किया जाता है। इसका मतलब है कि सभी कीफ़्रेम सभी घटकों पर लागू होते हैं। हमेशा। हां, आपका एनीमेशन आवश्यक रूप से आपके घटक में परिभाषित कीफ़्रेम का उपयोग नहीं करता है। यह अंतिम कीफ़्रेम का उपयोग करता है जो बिल्कुल उसी नाम से मेल खाता है जिसे वैश्विक दायरे में लोड किया गया था। जब तक आपके सभी मुख्य-फ़्रेम समान हैं, यह एक मामूली समस्या प्रतीत हो सकती है। लेकिन जिस क्षण आप किसी विशिष्ट उपयोग के मामले के लिए एनीमेशन को अनुकूलित करना चाहते हैं, तो आप परेशानी में पड़ जाते हैं, या इससे भी बदतर, आप ही इसका कारण बनेंगे। या तो आपका एनीमेशन काम नहीं करेगा क्योंकि आपके बाद एक अन्य घटक लोड हो गया है, जो आपके कीफ़्रेम को ओवरराइट कर रहा है, या आपका घटक सबसे अंत में लोड होता है और गलती से उस कीफ़्रेम के नाम का उपयोग करके हर दूसरे घटक के लिए एनीमेशन व्यवहार को बदल देता है, और आपको इसका एहसास भी नहीं हो सकता है। यहां एक सरल उदाहरण दिया गया है जो समस्या को प्रदर्शित करता है: .घटक-एक { /* घटक शैलियाँ */ एनीमेशन: पल्स 1s आसानी से अंदर-बाहर अनंत वैकल्पिक; }
/* यह @keyframes परिभाषा काम नहीं करेगी */ @कीफ़्रेम्स पल्स { से { पैमाना: 1; } को { पैमाना: 1.1; } }
/* बाद में कोड में... */
.घटक-दो { /* घटक शैलियाँ */ एनीमेशन: पल्स 1s आसानी से अंदर-बाहर अनंत; }
/* यह कीफ़्रेम दोनों घटकों पर लागू होंगे */ @कीफ़्रेम्स पल्स { 0%, 20%, 100% { पैमाना: 1; } 10%, 40% { स्केल: 1.2; } }
दोनों घटक समान एनीमेशन नाम का उपयोग करते हैं, लेकिन दूसरी @keyframes परिभाषा पहले वाले को अधिलेखित कर देती है। अब घटक-एक और घटक-दो दोनों दूसरे कीफ़्रेम का उपयोग करेंगे, भले ही किस घटक ने कौन से कीफ़्रेम को परिभाषित किया हो। अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 1 [फोर्क्ड] देखें। बुरी बात? यह अक्सर स्थानीय विकास में पूरी तरह से काम करता है लेकिन उत्पादन में रहस्यमय तरीके से टूट जाता है जब निर्माण प्रक्रियाएँ आपके स्टाइलशीट के लोडिंग क्रम को बदल देती हैं। आप ऐसे एनिमेशन के साथ समाप्त होते हैं जो अलग-अलग व्यवहार करते हैं, यह इस बात पर निर्भर करता है कि कौन से घटक लोड किए गए हैं और किस क्रम में लोड किए गए हैं। समाधान: एकीकृत कीफ़्रेम इस अराजकता का उत्तर आश्चर्यजनक रूप से सरल है: पूर्वनिर्धारित गतिशील कीफ़्रेम एक साझा स्टाइलशीट में संग्रहीत होते हैं। प्रत्येक घटक को अपने स्वयं के एनिमेशन को परिभाषित करने देने के बजाय, हम केंद्रीकृत कीफ़्रेम बनाते हैं जो अच्छी तरह से प्रलेखित होते हैं, जिन्हें बनाना आसान होता हैउपयोग, रखरखाव योग्य और आपके प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुरूप। इसे कीफ़्रेम टोकन के रूप में सोचें। जैसे हम रंगों और रिक्ति के लिए टोकन का उपयोग करते हैं, और हम में से कई पहले से ही एनीमेशन गुणों के लिए टोकन का उपयोग करते हैं, जैसे अवधि और सहजता फ़ंक्शन, तो कीफ़्रेम के लिए भी टोकन का उपयोग क्यों न करें? यह दृष्टिकोण आपके द्वारा उपयोग किए जा रहे किसी भी मौजूदा डिज़ाइन टोकन वर्कफ़्लो के साथ स्वाभाविक रूप से एकीकृत हो सकता है, जबकि छोटी समस्या (कोड डुप्लिकेशन) और बड़ी समस्या (वैश्विक दायरा संघर्ष) दोनों को एक बार में हल कर सकता है। विचार सीधा है: हमारे सभी सामान्य एनिमेशन के लिए सत्य का एक एकल स्रोत बनाएं। इस साझा स्टाइलशीट में सावधानीपूर्वक तैयार किए गए कीफ़्रेम शामिल हैं जो हमारे प्रोजेक्ट द्वारा वास्तव में उपयोग किए जाने वाले एनीमेशन पैटर्न को कवर करते हैं। अब यह अनुमान लगाने की आवश्यकता नहीं है कि हमारे कोडबेस में कहीं फीका एनीमेशन पहले से मौजूद है या नहीं। अन्य घटकों के एनिमेशन को अब गलती से ओवरराइट नहीं किया जाएगा। लेकिन यहाँ कुंजी यह है: ये केवल स्थिर कॉपी-पेस्ट एनिमेशन नहीं हैं। वे सीएसएस कस्टम गुणों के माध्यम से गतिशील और अनुकूलन योग्य होने के लिए डिज़ाइन किए गए हैं, जिससे हमें विशिष्ट उपयोग के मामलों में एनिमेशन को अनुकूलित करने की लचीलापन के साथ-साथ स्थिरता बनाए रखने की इजाजत मिलती है, जैसे कि आपको एक ही स्थान पर थोड़ा बड़ा "पल्स" एनीमेशन की आवश्यकता होती है। पहला कीफ़्रेम टोकन बनाना सबसे पहले कम लटकने वाले फलों में से एक जिससे हमें निपटना चाहिए वह है "फ़ेड-इन" एनीमेशन। मेरी हालिया परियोजनाओं में से एक में, मुझे एक दर्जन से अधिक अलग-अलग फ़ेड-इन परिभाषाएँ मिलीं, और हाँ, वे सभी केवल 0 से 1 तक अस्पष्टता को एनिमेटेड करती हैं। तो, आइए एक नई स्टाइलशीट बनाएं, इसे kf-tokens.css कहें, इसे अपने प्रोजेक्ट में आयात करें, और इसके अंदर उचित टिप्पणियों के साथ हमारे कीफ़्रेम रखें। /* keyframes-tokens.css */
/* * फ़ेड इन - फ़ेड एंट्रेंस एनीमेशन * उपयोग: एनीमेशन: केएफ-फ़ेड-इन 0.3s ईज़-आउट; */ @कीफ़्रेम्स केएफ-फ़ेड-इन { से { अपारदर्शिता: 0; } को { अपारदर्शिता: 1; } }
यह एकल @keyframes घोषणा हमारे कोडबेस में उन सभी बिखरे हुए फ़ेड-इन एनिमेशन को प्रतिस्थापित करती है। स्वच्छ, सरल और विश्व स्तर पर लागू। और अब जब हमारे पास यह टोकन परिभाषित है, तो हम इसे अपने पूरे प्रोजेक्ट में किसी भी घटक से उपयोग कर सकते हैं: .मॉडल { एनीमेशन: केएफ-फ़ेड-इन 0.3s ईज़-आउट; }
.टूलटिप { एनीमेशन: केएफ-फ़ेड-इन 0.2एस ईज़ी-इन-आउट; }
.अधिसूचना { एनीमेशन: केएफ-फ़ेड-इन 0.5s ईज़-आउट; }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 2 [फोर्क्ड] देखें। नोट: हम अपने सभी @keyframes नामों में kf- उपसर्ग का उपयोग कर रहे हैं। यह उपसर्ग एक नेमस्पेस के रूप में कार्य करता है जो प्रोजेक्ट में मौजूदा एनिमेशन के साथ नामकरण के टकराव को रोकता है और यह तुरंत स्पष्ट करता है कि ये कीफ़्रेम हमारी कीफ़्रेम टोकन फ़ाइल से आते हैं। एक गतिशील स्लाइड बनाना केएफ-फ़ेड-इन कीफ़्रेम बढ़िया काम करते हैं क्योंकि यह सरल है और चीज़ों को गड़बड़ाने की बहुत कम गुंजाइश होती है। हालाँकि, अन्य एनिमेशन में, हमें और अधिक गतिशील होने की आवश्यकता है, और यहां हम सीएसएस कस्टम गुणों की विशाल शक्ति का लाभ उठा सकते हैं। यह वह जगह है जहां बिखरे हुए स्थिर एनिमेशन की तुलना में कीफ़्रेम टोकन वास्तव में चमकते हैं। आइए एक सामान्य परिदृश्य लें: "स्लाइड-इन" एनिमेशन। लेकिन सरकें कहाँ से? दाईं ओर से 100px? बाएँ से 50%? क्या इसे स्क्रीन के ऊपर से प्रवेश करना चाहिए? या शायद नीचे से तैरें? इतनी सारी संभावनाएँ, लेकिन प्रत्येक दिशा और प्रत्येक भिन्नता के लिए अलग-अलग कीफ़्रेम बनाने के बजाय, हम एक लचीला टोकन बना सकते हैं जो सभी परिदृश्यों के अनुकूल हो: /* * स्लाइड इन - दिशात्मक स्लाइड एनीमेशन * दिशा नियंत्रित करने के लिए --kf-slide-from का उपयोग करें * डिफ़ॉल्ट: बाईं ओर से स्लाइड (-100%) * उपयोग: * एनीमेशन: केएफ-स्लाइड-इन 0.3s ईज़-आउट; * --kf-स्लाइड-से: -100px 0; // बाईं ओर से स्लाइड करें * --kf-स्लाइड-से: 100px 0; // दाईं ओर से स्लाइड करें * --kf-स्लाइड-से: 0 -50px; // ऊपर से स्लाइड करें */
@कीफ़्रेम्स केएफ-स्लाइड-इन { से { अनुवाद करें: var(--kf-स्लाइड-से, -100% 0); } को { अनुवाद: 0 0; } }
अब हम --kf-slide-from कस्टम प्रॉपर्टी को बदलकर किसी भी स्लाइड दिशा के लिए इस एकल @keyframes टोकन का उपयोग कर सकते हैं: .साइडबार { एनीमेशन: केएफ-स्लाइड-इन 0.3s ईज़-आउट; /* डिफ़ॉल्ट मान का उपयोग करता है: बाईं ओर से स्लाइड */ }
.अधिसूचना { एनीमेशन: केएफ-स्लाइड-इन 0.4एस ईज-आउट; --kf-स्लाइड-से: 0 -50px; /* ऊपर से स्लाइड*/ }
.मॉडल { एनीमेशन: केएफ-फ़ेड-इन 0.5s, केएफ-स्लाइड-इन 0.5एस क्यूबिक-बेज़ियर(0.34, 1.56, 0.64, 1); --kf-स्लाइड-से: 50px 50px; /* नीचे दाईं ओर से स्लाइड करें */ }
यह दृष्टिकोण हमें निरंतरता बनाए रखते हुए अविश्वसनीय लचीलापन प्रदान करता है। एक मुख्य-फ़्रेम घोषणा, अनंत संभावनाएँ। अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 3 [फोर्क्ड] देखें। और यदि हम अपने एनिमेशन को और अधिक लचीला बनाना चाहते हैं, साथ ही "स्लाइड-आउट" प्रभावों की अनुमति भी दे सकते हैं, तो हम ऐसा कर सकते हैंबस कस्टम प्रॉपर्टी में --kf-slide-जोड़ें, जैसा कि हम अगले भाग में देखेंगे। द्विदिश ज़ूम कीफ़्रेम एक अन्य सामान्य एनीमेशन जो सभी परियोजनाओं में दोहराया जाता है वह है "ज़ूम" प्रभाव। चाहे वह टोस्ट संदेशों के लिए सूक्ष्म स्केल-अप हो, मोडल्स के लिए नाटकीय ज़ूम-इन हो, या शीर्षकों के लिए हल्का स्केल-डाउन प्रभाव हो, ज़ूम एनिमेशन हर जगह हैं। प्रत्येक स्केल मान के लिए अलग-अलग कीफ़्रेम बनाने के बजाय, आइए केएफ-ज़ूम कीफ़्रेम का एक लचीला सेट बनाएं:
/* * ज़ूम - स्केल एनीमेशन * स्केल मानों को नियंत्रित करने के लिए --kf-zoom-from और --kf-zoom-to का उपयोग करें * डिफ़ॉल्ट: 80% से 100% तक ज़ूम (0.8 से 1) * उपयोग: * एनिमेशन: केएफ-ज़ूम 0.2एस ईज़-आउट; * --केएफ-ज़ूम-से: 0.5; --केएफ-ज़ूम-टू: 1; // 50% से 100% तक ज़ूम करें * --केएफ-ज़ूम-से: 1; --केएफ-ज़ूम-टू: 0; // 100% से 0% तक ज़ूम करें * --केएफ-ज़ूम-से: 1; --केएफ-ज़ूम-टू: 1.1; // 100% से 110% तक ज़ूम करें */
@कीफ़्रेम्स केएफ-ज़ूम { से { स्केल: var(--kf-ज़ूम-फ्रॉम, 0.8); } को { स्केल: var(--kf-ज़ूम-टू, 1); } }
एक परिभाषा के साथ, हम अपनी आवश्यकतानुसार कोई भी ज़ूम भिन्नता प्राप्त कर सकते हैं: .टोस्ट { एनीमेशन: केएफ-स्लाइड-इन 0.2एस, केएफ-ज़ूम 0.4एस आसानी से बाहर; --केएफ-स्लाइड-से: 0 100%; /* ऊपर से स्लाइड*/ /* डिफ़ॉल्ट ज़ूम का उपयोग करता है: 80% से 100% तक स्केल */ }
.मॉडल { एनीमेशन: केएफ-ज़ूम 0.3एस क्यूबिक-बेज़ियर(0.34, 1.56, 0.64, 1); --केएफ-ज़ूम-से: 0; /* 0% से 100% तक नाटकीय ज़ूम */ }
.शीर्षक { एनीमेशन: केएफ-फेड-इन 2एस, केएफ-ज़ूम 2एस ईज़ी-इन; --केएफ-ज़ूम-से: 1.2; --केएफ-ज़ूम-टू: 0.8; /* धीरे से स्केल नीचे करें*/ }
0.8 (80%) का डिफ़ॉल्ट अधिकांश यूआई तत्वों, जैसे टोस्ट संदेश और कार्ड के लिए पूरी तरह से काम करता है, जबकि विशेष मामलों के लिए अनुकूलित करना अभी भी आसान है। अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 4 [फोर्क्ड] देखें। आपने हाल के उदाहरणों में कुछ दिलचस्प बात देखी होगी: हम एनिमेशन का संयोजन कर रहे हैं। @Keyframes टोकन के साथ काम करने का एक प्रमुख लाभ यह है कि उन्हें एक-दूसरे के साथ सहजता से एकीकृत करने के लिए डिज़ाइन किया गया है। यह सहज रचना जानबूझकर की गई है, आकस्मिक नहीं। हम एनीमेशन रचना पर बाद में अधिक विस्तार से चर्चा करेंगे, जिसमें यह भी शामिल होगा कि वे कहाँ समस्याग्रस्त हो सकते हैं, लेकिन अधिकांश संयोजन सीधे और लागू करने में आसान हैं। नोट: इस लेख को लिखते समय, और शायद इसे लिखने के कारण, मैंने खुद को प्रवेश एनिमेशन के पूरे विचार पर पुनर्विचार करते हुए पाया। सीएसएस में सभी हालिया प्रगति के साथ, क्या हमें अभी भी उनकी आवश्यकता है? सौभाग्य से, एडम अर्गिल ने उन्हीं प्रश्नों का पता लगाया और उन्हें अपने ब्लॉग में शानदार ढंग से व्यक्त किया। यह यहां लिखी गई बातों का खंडन नहीं करता है, लेकिन यह विचार करने लायक दृष्टिकोण प्रस्तुत करता है, खासकर यदि आपकी परियोजनाएं प्रवेश एनिमेशन पर बहुत अधिक निर्भर करती हैं। सतत एनिमेशन जबकि प्रवेश एनिमेशन, जैसे "फ़ेड", "स्लाइड", और "ज़ूम" एक बार होते हैं और फिर बंद हो जाते हैं, ध्यान आकर्षित करने या चल रही गतिविधि को इंगित करने के लिए निरंतर एनिमेशन अनिश्चित काल तक लूप करते हैं। मेरे सामने आने वाले दो सबसे आम निरंतर एनिमेशन "स्पिन" (संकेतक लोड करने के लिए) और "पल्स" (महत्वपूर्ण तत्वों को हाइलाइट करने के लिए) हैं। जब कीफ़्रेम टोकन बनाने की बात आती है तो ये एनिमेशन अद्वितीय चुनौतियाँ पेश करते हैं। आम तौर पर एक राज्य से दूसरे राज्य में जाने वाले प्रवेश एनिमेशन के विपरीत, निरंतर एनिमेशन को उनके व्यवहार पैटर्न में अत्यधिक अनुकूलन की आवश्यकता होती है। स्पिन डॉक्टर ऐसा प्रतीत होता है कि प्रत्येक प्रोजेक्ट एकाधिक स्पिन एनिमेशन का उपयोग करता है। कुछ दक्षिणावर्त घूमते हैं, कुछ वामावर्त। कुछ लोग एकल 360-डिग्री घूर्णन करते हैं, अन्य लोग तेज़ प्रभाव के लिए एकाधिक मोड़ करते हैं। प्रत्येक विविधता के लिए अलग-अलग कीफ़्रेम बनाने के बजाय, आइए एक लचीला स्पिन बनाएं जो सभी परिदृश्यों को संभाल सके:
/* * स्पिन - रोटेशन एनीमेशन * रोटेशन रेंज को नियंत्रित करने के लिए --kf-spin-from और --kf-spin-to का उपयोग करें * रोटेशन की मात्रा को नियंत्रित करने के लिए --kf-spin-turns का उपयोग करें * डिफ़ॉल्ट: 0 डिग्री से 360 डिग्री तक घूमता है (1 पूर्ण रोटेशन) * उपयोग: * एनीमेशन: केएफ-स्पिन 1एस रैखिक अनंत; * --केएफ-स्पिन-टर्न: 2; // 2 पूर्ण घुमाव * --केएफ-स्पिन-से: 0डिग्री; --केएफ-स्पिन-टू: 180डिग्री; // आधा घुमाव * --केएफ-स्पिन-से: 0डिग्री; --केएफ-स्पिन-टू: -360डिग्री; // वामावर्त */
@कीफ़्रेम्स केएफ-स्पिन { से { घुमाएँ: var(--kf-स्पिन-से, 0deg); } को { घुमाएँ: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
अब हम अपनी पसंद का कोई भी स्पिन वेरिएशन बना सकते हैं:
.लोडिंग-स्पिनर { एनीमेशन: केएफ-स्पिन 1एस रैखिक अनंत; /* डिफ़ॉल्ट का उपयोग करता है: 0डिग्री से 360डिग्री तक घूमता है */ }
.फास्ट-लोडर { एनीमेशन: केएफ-स्पिन 1.2एस आसानी से अंदर-बाहर अनंत वैकल्पिक; --केएफ-स्पिन-टर्न: 3; /* प्रति चक्र प्रत्येक दिशा के लिए 3 पूर्ण घुमाव*/ }
.स्टेप्ड-रिवर्स { एनीमेशन: केएफ-स्पिन 1.5एस चरण(8) अनंत; --केएफ-स्पिन-टू: -360डिग्री; /* वामावर्त*/ }
.सूक्ष्म-विगल { एनीमेशन: केएफ-स्पिन 2एस आसानी से अंदर-बाहर अनंत वैकल्पिक; --केएफ-स्पिन-से: -16डिग्री; --केएफ-स्पिन-टू: 32डिग्री; /* 36 डिग्री घुमाएँ: -18डिग्री और +18डिग्री के बीच */ }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 5 [फोर्क्ड] देखें। इस दृष्टिकोण की सुंदरता यह है कि वही कीफ़्रेम स्पिनरों, घूमने वाले आइकन, विगल प्रभाव और यहां तक कि जटिल मल्टी-टर्न एनिमेशन को लोड करने के लिए काम करते हैं। पल्स विरोधाभास पल्स एनिमेशन अधिक पेचीदा हैं क्योंकि वे विभिन्न गुणों को "पल्स" कर सकते हैं। कुछ पैमाने को स्पंदित करते हैं, अन्य अस्पष्टता को स्पंदित करते हैं, और कुछ चमक या संतृप्ति जैसे रंग गुणों को स्पंदित करते हैं। प्रत्येक प्रॉपर्टी के लिए अलग-अलग कीफ़्रेम बनाने के बजाय, हम ऐसे कीफ़्रेम बना सकते हैं जो किसी भी सीएसएस प्रॉपर्टी के साथ काम करते हैं। यहां स्केल और अपारदर्शिता विकल्पों के साथ पल्स कीफ़्रेम का एक उदाहरण दिया गया है:
/* * पल्स - स्पंदन एनीमेशन * स्केल रेंज को नियंत्रित करने के लिए --kf-पल्स-स्केल-फ्रॉम और --kf-पल्स-स्केल-टू का उपयोग करें * अपारदर्शिता सीमा को नियंत्रित करने के लिए --kf-palse-opacity-from और --kf-palse-opacity-to का उपयोग करें * डिफ़ॉल्ट: कोई पल्स नहीं (सभी मान 1) * उपयोग: * एनीमेशन: केएफ-पल्स 2एस आसानी से अंदर-बाहर अनंत वैकल्पिक; * --केएफ-पल्स-स्केल-से: 0.95; --केएफ-पल्स-स्केल-टू: 1.05; // स्केल पल्स * --केएफ-पल्स-अस्पष्टता-से: 0.7; --केएफ-पल्स-ओपेसिटी-टू: 1; // अपारदर्शिता पल्स */
@कीफ़्रेम्स केएफ-पल्स { से { स्केल: var(--kf-पल्स-स्केल-फ्रॉम, 1); अपारदर्शिता: var(--kf-पल्स-अस्पष्टता-से, 1); } को { स्केल: var(--kf-पल्स-स्केल-टू, 1); अपारदर्शिता: var(--kf-पल्स-अपारदर्शिता-से, 1); } }
यह एक लचीली पल्स बनाता है जो कई गुणों को चेतन कर सकता है: .कॉल-टू-एक्शन { एनीमेशन: केएफ-पल्स 0.6s अनंत वैकल्पिक; --केएफ-पल्स-अस्पष्टता-से: 0.5; /* अपारदर्शिता पल्स*/ }
.नोटिफिकेशन-डॉट { एनीमेशन: केएफ-पल्स 0.6एस आसानी से अंदर-बाहर अनंत वैकल्पिक; --केएफ-पल्स-स्केल-से: 0.9; --केएफ-पल्स-स्केल-टू: 1.1; /* स्केल पल्स*/ }
.पाठ-हाइलाइट { एनीमेशन: केएफ-पल्स 1.5एस ईज़-आउट अनंत; --केएफ-पल्स-स्केल-से: 0.8; --केएफ-पल्स-अस्पष्टता-से: 0.2; /* स्केल और अपारदर्शिता पल्स */ }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 6 [फोर्क्ड] देखें। यह एकल केएफ-पल्स कीफ़्रेम सूक्ष्म ध्यान खींचने से लेकर नाटकीय हाइलाइट्स तक सब कुछ संभाल सकता है, जबकि इसे अनुकूलित करना आसान है। उन्नत सहजता कीफ़्रेम टोकन का उपयोग करने के बारे में एक बड़ी बात यह है कि हमारी एनीमेशन लाइब्रेरी का विस्तार करना और ऐसे प्रभाव प्रदान करना कितना आसान है जो अधिकांश डेवलपर्स इलास्टिक या बाउंस जैसे स्क्रैच से लिखने की जहमत नहीं उठाएंगे। यहां एक सरल "बाउंस" कीफ़्रेम टोकन का उदाहरण दिया गया है जो जंप ऊंचाई को नियंत्रित करने के लिए --kf-bounce-from कस्टम प्रॉपर्टी का उपयोग करता है। /* * बाउंस - बाउंसिंग प्रवेश एनीमेशन * छलांग की ऊंचाई को नियंत्रित करने के लिए --kf-bounce-from का उपयोग करें * डिफ़ॉल्ट: 100vh से कूदता है (स्क्रीन से बाहर) * उपयोग: * एनीमेशन: केएफ-बाउंस 3एस ईज़ी-इन; * --kf-बाउंस-से: 200px; // 200px ऊंचाई से कूदें */
@कीफ़्रेम्स केएफ-बाउंस { 0% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -1); }
34% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.4); }
55% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.2); }
72% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.1); }
85% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.05); }
94% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.025); }
99% { अनुवाद करें: 0 कैल्क(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { अनुवाद: 0 0; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से बाहर; } }
कीफ़्रेम के अंदर गणनाओं के कारण "इलास्टिक" जैसे एनिमेशन थोड़े पेचीदा हैं। हमें --kf-elastic-from-X और --kf-elastic-from-Y को अलग-अलग परिभाषित करने की आवश्यकता है (दोनों वैकल्पिक हैं), और साथ में वे हमें स्क्रीन पर किसी भी बिंदु से एक लोचदार प्रवेश द्वार बनाने देते हैं।
/* * इलास्टिक इन - इलास्टिक प्रवेश एनीमेशन * प्रारंभ स्थिति को नियंत्रित करने के लिए --kf-elastic-from-X और --kf-elastic-from-Y का उपयोग करें * डिफ़ॉल्ट: शीर्ष केंद्र से प्रवेश करता है (0, -100vh) * उपयोग: * एनीमेशन: केएफ-इलास्टिक-इन 2एस ईज़ी-इन-आउट दोनों; * --kf-लोचदार-से-एक्स: -50px; * --kf-लोचदार-से-Y: -200px; // (-50px, -200px) से दर्ज करें */
@कीफ़्रेम्स केएफ-इलास्टिक-इन { 0% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { अनुवाद करें: कैल्क(var(--kf-elastic-from-X, -50vw) * 0.1312)कैल्क(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { अनुवाद करें: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { अनुवाद: 0 0; } }
यह दृष्टिकोण केवल एक कस्टम प्रॉपर्टी को बदलकर, हमारे प्रोजेक्ट में उन्नत कीफ़्रेम का पुन: उपयोग और कस्टमाइज़ करना आसान बनाता है।
.बाउंस-एंड-ज़ूम { एनीमेशन: केएफ-बाउंस 3एस आसानी से, केएफ-ज़ूम 3एस रैखिक; --केएफ-ज़ूम-से: 0; }
.उछाल-और-स्लाइड { एनीमेशन-रचना: जोड़ें; /* दोनों एनिमेशन अनुवाद का उपयोग करते हैं */ एनीमेशन: केएफ-बाउंस 3एस आसानी से, केएफ-स्लाइड-इन 3एस ईज़ी-आउट; --kf-स्लाइड-से: -200px; }
.इलास्टिक-इन { एनीमेशन: केएफ-इलास्टिक-इन 2एस ईज़ी-इन-आउट दोनों; }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 7 [फोर्क्ड] देखें। इस बिंदु तक, हमने देखा है कि हम कीफ़्रेम को स्मार्ट और कुशल तरीके से कैसे समेकित कर सकते हैं। बेशक, आप अपने प्रोजेक्ट की ज़रूरतों को बेहतर ढंग से फिट करने के लिए चीजों में बदलाव करना चाह सकते हैं, लेकिन हमने कई सामान्य एनिमेशन और रोजमर्रा के उपयोग के मामलों के उदाहरण शामिल किए हैं। और इन कीफ़्रेम टोकन के साथ, अब हमारे पास पूरे प्रोजेक्ट में सुसंगत, रखरखाव योग्य एनिमेशन बनाने के लिए शक्तिशाली बिल्डिंग ब्लॉक हैं। अब कोई डुप्लीकेट कीफ़्रेम नहीं, कोई वैश्विक दायरा टकराव नहीं। हमारी सभी एनिमेशन आवश्यकताओं को संभालने का एक साफ़, सुविधाजनक तरीका। लेकिन असली सवाल यह है: हम इन बिल्डिंग ब्लॉक्स को एक साथ कैसे बनाते हैं? यह सब एक साथ रखना हमने देखा है कि बुनियादी कीफ़्रेम टोकन का संयोजन सरल है। हमें पहले एनीमेशन को परिभाषित करने, दूसरे को परिभाषित करने, आवश्यकतानुसार वेरिएबल सेट करने और बस इतना ही करने के अलावा किसी विशेष चीज़ की आवश्यकता नहीं है। /* फ़ेड इन + स्लाइड इन */ .टोस्ट { एनीमेशन: केएफ-फ़ेड-इन 0.4s, केएफ-स्लाइड-इन 0.4एस क्यूबिक-बेज़ियर(0.34, 1.56, 0.64, 1); --kf-स्लाइड-से: 0 40px; }
/* ज़ूम इन + फ़ेड इन */ .मॉडल { एनीमेशन: केएफ-फ़ेड-इन 0.3s, केएफ-ज़ूम 0.3एस क्यूबिक-बेज़ियर(0.34, 1.56, 0.64, 1); --केएफ-ज़ूम-से: 0.7; --केएफ-ज़ूम-टू: 1; }
/* स्लाइड इन + पल्स */ .अधिसूचना { एनीमेशन: केएफ-स्लाइड-इन 0.5s, केएफ-पल्स 1.2एस आसानी से अंदर-बाहर अनंत वैकल्पिक; --kf-स्लाइड-से: -100px 0; --केएफ-पल्स-स्केल-से: 0.95; --केएफ-पल्स-स्केल-टू: 1.05; }
ये संयोजन खूबसूरती से काम करते हैं क्योंकि प्रत्येक एनीमेशन एक अलग संपत्ति को लक्षित करता है: अपारदर्शिता, परिवर्तन (अनुवाद/स्केल), आदि। लेकिन कभी-कभी टकराव होते हैं, और हमें यह जानना होगा कि उनसे क्यों और कैसे निपटना है। जब दो एनिमेशन एक ही संपत्ति को एनिमेट करने का प्रयास करते हैं - उदाहरण के लिए, दोनों एनिमेटिंग स्केल या दोनों एनिमेटिंग अपारदर्शिता - परिणाम वह नहीं होगा जो आप उम्मीद करते हैं। डिफ़ॉल्ट रूप से, केवल एक एनिमेशन वास्तव में उस प्रॉपर्टी पर लागू होता है, जो एनीमेशन सूची में अंतिम है। यह एक सीमा है कि सीएसएस एक ही संपत्ति पर एकाधिक एनिमेशन को कैसे संभालता है। उदाहरण के लिए, यह अपेक्षानुसार काम नहीं करेगा क्योंकि केवल केएफ-पल्स एनीमेशन लागू होगा। .बैड-कॉम्बो { एनीमेशन: केएफ-ज़ूम 0.5एस आगे, केएफ-पल्स 1.2एस अनंत वैकल्पिक; --केएफ-ज़ूम-से: 0.5; --केएफ-ज़ूम-टू: 1.2; --केएफ-पल्स-स्केल-से: 0.8; --केएफ-पल्स-स्केल-टू: 1.1; }
एनीमेशन जोड़ एक ही प्रॉपर्टी को प्रभावित करने वाले कई एनिमेशन को संभालने का सबसे सरल और सीधा तरीका एनीमेशन-कंपोज़िशन प्रॉपर्टी का उपयोग करना है। उपरोक्त अंतिम उदाहरण में, केएफ-पल्स एनीमेशन केएफ-ज़ूम एनीमेशन को प्रतिस्थापित करता है, इसलिए हम प्रारंभिक ज़ूम नहीं देख पाएंगे और 1.2 का अपेक्षित स्केल नहीं मिलेगा। एनीमेशन-कंपोज़िशन को जोड़ने के लिए सेट करके, हम ब्राउज़र को दोनों एनिमेशन को संयोजित करने के लिए कहते हैं। इससे हमें वह परिणाम मिलता है जो हम चाहते हैं। .घटक-दो { एनीमेशन-रचना: जोड़ें; }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 8 [फोर्क्ड] देखें। यह दृष्टिकोण अधिकांश मामलों के लिए अच्छा काम करता है जहां हम एक ही संपत्ति पर प्रभावों को संयोजित करना चाहते हैं। यह तब भी उपयोगी होता है जब हमें एनिमेशन को स्थिर संपत्ति मूल्यों के साथ संयोजित करने की आवश्यकता होती है। उदाहरण के लिए, यदि हमारे पास एक तत्व है जो अनुवाद संपत्ति का उपयोग करके इसे ठीक उसी स्थान पर रखता है जहां हम चाहते हैं, और फिर हम इसे केएफ-स्लाइड-इन कीफ़्रेम के साथ एनिमेट करना चाहते हैं, तो हमें एनीमेशन-कंपोज़िशन के बिना एक खराब दृश्यमान छलांग मिलती है। अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 9 [फोर्क्ड] देखें। एनीमेशन-कंपोज़िशन जोड़ने के लिए सेट के साथ, एनीमेशन को मौजूदा के साथ आसानी से जोड़ा जाता हैरूपांतरित करें, इसलिए तत्व अपनी जगह पर बना रहता है और अपेक्षा के अनुरूप सक्रिय होता है। एनिमेशन स्टैगर एकाधिक एनिमेशन को संभालने का दूसरा तरीका उन्हें "स्टैगर" करना है - यानी, पहले एनीमेशन के खत्म होने के बाद दूसरा एनीमेशन शुरू करें। यह ऐसा समाधान नहीं है जो हर मामले के लिए काम करता है, लेकिन यह तब उपयोगी होता है जब हमारे पास एक प्रवेश एनीमेशन और उसके बाद एक निरंतर एनीमेशन होता है। /* फ़ेड इन + अपारदर्शिता पल्स */ .अधिसूचना { एनीमेशन: केएफ-फ़ेड-इन 2एस ईज़ी-आउट, केएफ-पल्स 0.5एस 2एस आसानी से अंदर-बाहर अनंत वैकल्पिक; --केएफ-पल्स-अपारदर्शिता-से: 0.5; }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 10 [फोर्क्ड] देखें। आदेश मायने रखता है जिन एनिमेशनों पर हम काम करते हैं उनमें से अधिकांश ट्रांसफॉर्म प्रॉपर्टी का उपयोग करते हैं। ज्यादातर मामलों में, यह अधिक सुविधाजनक है। इसका एक प्रदर्शन लाभ भी है क्योंकि ट्रांसफ़ॉर्म एनिमेशन को GPU-त्वरित किया जा सकता है। लेकिन अगर हम परिवर्तनों का उपयोग करते हैं, तो हमें यह स्वीकार करना होगा कि जिस क्रम में हम अपने परिवर्तन करते हैं वह मायने रखता है। बहुत। अब तक हमारे मुख्यफ़्रेमों में, हमने व्यक्तिगत परिवर्तनों का उपयोग किया है। विशिष्टताओं के अनुसार, इन्हें हमेशा एक निश्चित क्रम में लागू किया जाता है: पहले, तत्व का अनुवाद किया जाता है, फिर घुमाया जाता है, फिर स्केल किया जाता है। यह समझ में आता है और हममें से अधिकांश लोग यही अपेक्षा करते हैं। हालाँकि, यदि हम ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग करते हैं, तो फ़ंक्शन जिस क्रम में लिखे जाते हैं वही क्रम होता है जिसमें उन्हें लागू किया जाता है। इस मामले में, यदि हम किसी चीज़ को एक्स-अक्ष पर 100 पिक्सेल घुमाते हैं और फिर उसे 45 डिग्री घुमाते हैं, तो यह पहले उसे 45 डिग्री घुमाने और फिर उसे 100 पिक्सेल घुमाने जैसा नहीं है। /* गुलाबी वर्ग: पहले अनुवाद करें, फिर घुमाएँ */ .उदाहरण-एक { परिवर्तन: TranslateX(100px) रोटेट(45डिग्री); }
/* हरा वर्ग: पहले घुमाएँ, फिर अनुवाद करें */ .उदाहरण-दो { परिवर्तन: घुमाएँ(45डिग्री) TranslateX(100px); }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 11 [फोर्क्ड] देखें। लेकिन परिवर्तन क्रम के अनुसार, सभी व्यक्तिगत परिवर्तन - वह सब कुछ जो हमने कीफ़्रेम टोकन के लिए उपयोग किया है - परिवर्तन कार्यों से पहले होता है। इसका मतलब है कि आप ट्रांसफॉर्म प्रॉपर्टी में जो कुछ भी सेट करेंगे वह एनिमेशन के बाद होगा। लेकिन यदि आप, उदाहरण के लिए, केएफ-स्पिन कीफ़्रेम के साथ अनुवाद सेट करते हैं, तो अनुवाद एनीमेशन से पहले होगा। अभी तक उलझन में?! यह उन स्थितियों की ओर ले जाता है जहां स्थिर मान एक ही एनीमेशन के लिए अलग-अलग परिणाम पैदा कर सकते हैं, जैसे निम्नलिखित मामले में:
/*दोनों स्पिनरों के लिए सामान्य एनिमेशन*/ .स्पिनर { एनीमेशन: केएफ-स्पिन 1एस रैखिक अनंत; }
/* गुलाबी स्पिनर: घुमाने से पहले अनुवाद करें (व्यक्तिगत परिवर्तन) */ .स्पिनर-गुलाबी { अनुवाद: 100% 50%; }
/* हरा स्पिनर: घुमाएँ फिर अनुवाद करें (फ़ंक्शन क्रम) */ .स्पिनर-हरा { परिवर्तन: अनुवाद(100%, 50%); }
अमित शीन द्वारा पेन कीफ़्रेम टोकन - डेमो 12 [फोर्क्ड] देखें। आप देख सकते हैं कि पहले स्पिनर (गुलाबी) को एक अनुवाद मिलता है जो केएफ-स्पिन के घूमने से पहले होता है, इसलिए यह पहले अपनी जगह पर जाता है और फिर घूमता है। दूसरे स्पिनर (हरा) को एक ट्रांसलेशन() फ़ंक्शन मिलता है जो व्यक्तिगत परिवर्तन के बाद होता है, इसलिए तत्व पहले घूमता है, फिर अपने वर्तमान कोण के सापेक्ष चलता है, और हमें वह व्यापक कक्षा प्रभाव मिलता है। नहीं, यह कोई बग नहीं है. यह उन चीज़ों में से एक है जिन्हें हमें सीएसएस के बारे में जानने की ज़रूरत है और एकाधिक एनिमेशन या एकाधिक परिवर्तनों के साथ काम करते समय ध्यान में रखना चाहिए। यदि आवश्यक हो, तो आप kf-स्पिन-ऑल्ट कीफ़्रेम का एक अतिरिक्त सेट भी बना सकते हैं जो रोटेट() फ़ंक्शन का उपयोग करके तत्वों को घुमाता है। कम गति और जब हम वैकल्पिक कीफ़्रेम के बारे में बात कर रहे हैं, तो हम "नो एनिमेशन" विकल्प को नज़रअंदाज़ नहीं कर सकते। कीफ़्रेम टोकन का उपयोग करने का सबसे बड़ा लाभ यह है कि इसमें पहुंच सुनिश्चित की जा सकती है, और यह वास्तव में करना काफी आसान है। पहुंच को ध्यान में रखते हुए अपने कीफ्रेम को डिजाइन करके, हम यह सुनिश्चित कर सकते हैं कि जो उपयोगकर्ता कम गति पसंद करते हैं उन्हें अतिरिक्त काम या कोड दोहराव के बिना एक सहज, कम ध्यान भटकाने वाला अनुभव मिले। "रिड्यूस्ड मोशन" का सटीक अर्थ एक एनीमेशन से दूसरे एनीमेशन और प्रोजेक्ट से प्रोजेक्ट में थोड़ा बदल सकता है, लेकिन ध्यान रखने योग्य कुछ महत्वपूर्ण बिंदु यहां दिए गए हैं: मुख्यफ़्रेम म्यूट करना जबकि कुछ एनिमेशन को नरम या धीमा किया जा सकता है, वहीं कुछ ऐसे भी हैं जो कम गति का अनुरोध करने पर पूरी तरह से गायब हो जाने चाहिए। पल्स एनिमेशन इसका एक अच्छा उदाहरण हैं. यह सुनिश्चित करने के लिए कि ये एनिमेशन कम गति मोड में न चलें, हम उन्हें बस उचित मीडिया क्वेरी में लपेट सकते हैं।
@मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { @keyfrmaes kf-पल्स { से { स्केल: var(--kf-पल्स-स्केल-फ्रॉम, 1); अपारदर्शिता: var(--kf-पल्स-अस्पष्टता-से, 1); } को { स्केल: var(--kf-पल्स-स्केल-टू, 1); अपारदर्शिता:var(--kf-पल्स-अपारदर्शिता-से, 1); } } }
यह सुनिश्चित करता है कि जिन उपयोगकर्ताओं ने प्राथमिकता-कम-गति को कम करने के लिए सेट किया है, उन्हें एनीमेशन नहीं दिखेगा और उन्हें एक ऐसा अनुभव मिलेगा जो उनकी पसंद से मेल खाता है। तुरंत में कुछ मुख्य-फ़्रेम हैं जिन्हें हम आसानी से हटा नहीं सकते, जैसे प्रवेश एनिमेशन। मूल्य बदलना चाहिए, चेतन होना चाहिए; अन्यथा, तत्व का सही मान नहीं होगा। लेकिन धीमी गति में, प्रारंभिक मूल्य से यह संक्रमण तत्काल होना चाहिए। इसे प्राप्त करने के लिए, हम कीफ़्रेम का एक अतिरिक्त सेट परिभाषित करेंगे जहां मान तुरंत अंतिम स्थिति में पहुंच जाता है। ये हमारे डिफ़ॉल्ट कीफ़्रेम बन जाते हैं। फिर, हम पिछले उदाहरण की तरह, बिना-वरीयता के सेट किए गए प्रेफरेंस-रिड्यूस्ड-मोशन के लिए मीडिया क्वेरी के अंदर नियमित कीफ़्रेम जोड़ देंगे। /* कम गति के लिए तुरंत पॉप इन करें */ @कीफ़्रेम्स केएफ-ज़ूम { से, से { स्केल: var(--kf-ज़ूम-टू, 1); } }
@मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { /* मूल ज़ूम कीफ़्रेम्स */ @कीफ़्रेम्स केएफ-ज़ूम { से { स्केल: var(--kf-ज़ूम-फ्रॉम, 0.8); } को { स्केल: var(--kf-ज़ूम-टू, 1); } } }
इस तरह, जो उपयोगकर्ता कम गति पसंद करते हैं वे तत्व को तुरंत अपनी अंतिम स्थिति में दिखाई देंगे, जबकि बाकी सभी को एनिमेटेड संक्रमण मिलेगा। नरम दृष्टिकोण ऐसे मामले हैं जहां हम कुछ हलचल तो रखना चाहते हैं, लेकिन मूल एनीमेशन की तुलना में बहुत नरम और शांत। उदाहरण के लिए, हम बाउंस प्रवेश द्वार को सौम्य फ़ेड-इन से बदल सकते हैं।
@कीफ़्रेम्स केएफ-बाउंस { /* कम गति के लिए सॉफ्ट फ़ेड-इन */ }
@मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { @कीफ़्रेम्स केएफ-बाउंस { /* मूल बाउंस कीफ़्रेम*/ } }
अब, कम गति सक्षम वाले उपयोगकर्ताओं को अभी भी उपस्थिति का एहसास होता है, लेकिन उछाल या लोचदार एनीमेशन की तीव्र गति के बिना। बिल्डिंग ब्लॉक्स के साथ, अगला सवाल यह है कि उन्हें वास्तविक वर्कफ़्लो का हिस्सा कैसे बनाया जाए। लचीले कीफ़्रेम लिखना एक बात है, लेकिन किसी बड़े प्रोजेक्ट में उन्हें विश्वसनीय बनाने के लिए कुछ रणनीतियों की आवश्यकता होती है जिन्हें मुझे कठिन तरीके से सीखना पड़ा। कार्यान्वयन रणनीतियाँ और सर्वोत्तम प्रथाएँ एक बार जब हमारे पास कीफ़्रेम टोकन की एक ठोस लाइब्रेरी हो जाती है, तो असली चुनौती यह है कि उन्हें रोजमर्रा के काम में कैसे लाया जाए।
प्रलोभन यह है कि एक ही बार में सभी मुख्य-फ़्रेमों को हटा दिया जाए और घोषित किया जाए कि समस्या हल हो गई है, लेकिन व्यवहार में मैंने पाया है कि सर्वोत्तम परिणाम धीरे-धीरे अपनाने से आते हैं। सबसे आम एनिमेशन से शुरुआत करें, जैसे फ़ेड या स्लाइड। ये आसान जीतें हैं जो बड़े पुनर्लेखन की आवश्यकता के बिना तत्काल मूल्य दिखाती हैं। नामकरण एक और बिंदु है जो ध्यान देने योग्य है। एक सुसंगत उपसर्ग या नामस्थान यह स्पष्ट करता है कि कौन से एनिमेशन टोकन हैं और कौन से स्थानीय वन-ऑफ़ हैं। यह आकस्मिक टकरावों को भी रोकता है और नई टीम के सदस्यों को एक नज़र में साझा सिस्टम को पहचानने में मदद करता है। दस्तावेज़ीकरण उतना ही महत्वपूर्ण है जितना कि कोड। यहां तक कि प्रत्येक कीफ़्रेम टोकन के ऊपर एक छोटी टिप्पणी भी बाद में अनुमान लगाने के घंटों को बचा सकती है। एक डेवलपर को टोकन फ़ाइल खोलने, अपनी ज़रूरत के प्रभाव को स्कैन करने और उपयोग पैटर्न को सीधे अपने घटक में कॉपी करने में सक्षम होना चाहिए। लचीलापन ही इस दृष्टिकोण को प्रयास के लायक बनाता है। समझदार कस्टम गुणों को उजागर करके, हम टीमों को सिस्टम को तोड़े बिना एनीमेशन को अनुकूलित करने के लिए जगह देते हैं। साथ ही, अधिक जटिल न बनने का प्रयास करें। जो मायने रखते हैं उन्हें प्रदान करें और बाकी को अपने मत पर रखें। अंत में, पहुंच को याद रखें। प्रत्येक एनीमेशन को कम गति के विकल्प की आवश्यकता नहीं होती है, लेकिन कई को होती है। इन समायोजनों को जल्दी लागू करने का मतलब है कि हमें बाद में उन्हें कभी भी दोबारा नहीं लगाना पड़ेगा, और यह देखभाल का एक स्तर दिखाता है जिसे हमारे उपयोगकर्ता नोटिस करेंगे, भले ही उन्होंने कभी इसका उल्लेख न किया हो।
मेरे अनुभव में, कीफ़्रेम टोकन को हमारे डिज़ाइन टोकन वर्कफ़्लो के हिस्से के रूप में मानना ही उन्हें चिपकाने वाला बनाता है। एक बार जब वे अपनी जगह पर स्थापित हो जाते हैं, तो वे विशेष प्रभावों की तरह महसूस करना बंद कर देते हैं और डिज़ाइन भाषा का हिस्सा बन जाते हैं, जो कि उत्पाद कैसे चलता है और कैसे प्रतिक्रिया करता है, इसका एक स्वाभाविक विस्तार है। लपेटना एनिमेशन इंटरफ़ेस निर्माण के सबसे आनंददायक भागों में से एक हो सकते हैं, लेकिन संरचना के बिना, वे निराशा के सबसे बड़े स्रोतों में से एक भी बन सकते हैं। कीफ़्रेम को टोकन के रूप में मानकर, आप कुछ ऐसा लेते हैं जो आमतौर पर गड़बड़ होता है और उसे प्रबंधित करना कठिन होता है और इसे एक स्पष्ट, पूर्वानुमानित प्रणाली में बदल देते हैं। वास्तविक मूल्य केवल कोड की कुछ पंक्तियों को सहेजने में नहीं है। यह विश्वास में है कि जब आप फ़ेड, स्लाइड, ज़ूम या स्पिन का उपयोग करते हैं, तो आप ठीक से जानते हैं कि यह पूरे प्रोजेक्ट में कैसा व्यवहार करेगा। यह लचीलेपन में है जो अंतहीन विविधताओं की अराजकता के बिना कस्टम गुणों से आता है। और यह बुनियाद में जोड़े जाने के बजाय उसमें निर्मित पहुंच में हैएक बाद का विचार. मैंने इन विचारों को अलग-अलग टीमों और अलग-अलग कोडबेस में काम करते देखा है, और पैटर्न हमेशा एक जैसा होता है। एक बार टोकन स्थापित हो जाने के बाद, कीफ़्रेम युक्तियों का बिखरा हुआ संग्रह बनना बंद कर देते हैं और डिज़ाइन भाषा का हिस्सा बन जाते हैं। वे उत्पाद को अधिक जानबूझकर, अधिक सुसंगत और अधिक जीवंत बनाते हैं। यदि आप इस लेख से एक चीज़ लेते हैं, तो उसे यह होने दें: एनिमेशन उसी देखभाल और संरचना के लायक हैं जो हम पहले से ही रंगों, टाइपोग्राफी और रिक्ति को देते हैं। जब भी आपका इंटरफ़ेस बदलता है तो कीफ़्रेम टोकन में एक छोटा सा निवेश लाभदायक होता है।
