क्रोम डेवलपर टूल्स में एनिमेशन इंस्पेक्टर का उपयोग करना

अगली बार जब आप नियमित CSS3- आधारित एनिमेशन बनाते हैं, तो आपके लिए Chrome डेवलपर टूल में जाना और एनीमेशन सत्यापन और अनुकूलन सुविधाओं का लाभ उठाना उपयोगी हो सकता है। इस संक्षिप्त लेख में, हम आपको बताएंगे कि क्रोम में कौन से एनीमेशन उपकरण उपलब्ध हैं, उन्हें कैसे एक्सेस किया जा सकता है और वे आपकी कैसे मदद कर सकते हैं।

यदि आप इन उपकरणों का उपयोग करके अपने CSS3 के एनिमेशन का परीक्षण करना चाहते हैं, तो आप हमारे पाठ्यक्रम से तैयार कोड का उपयोग कर सकते हैं: 10 CSS3 प्रोजेक्ट: इंटरफ़ेस और लेआउट ।


यहाँ पृष्ठ का पूर्ण संस्करण है।

एनिमेशन टैब को खोलना

CSS3 के एनीमेशन वाले पृष्ठ पर, सबसे पहले View> Developer> Developer टूल पर जाकर "Chrome डेवलपर टूल" खोलें । वैकल्पिक रूप से, आप कीबोर्ड शॉर्टकट: F12 या CTRL + SHIFT + I का उपयोग कर सकते हैं ।

जब डेवलपर उपकरण खुले होते हैं, तो ऊपरी दाएं कोने में तीन ऊर्ध्वाधर बिंदुओं द्वारा इंगित मेनू पर जाएं, फिर अधिक उपकरण> एनिमेशन का चयन करें , जैसा कि नीचे दिखाया गया है:



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



पैनल के लिए अपने एनिमेशन के बारे में जानकारी पढ़ने के लिए, पृष्ठ को रीफ्रेश करें और आप निम्नलिखित देखेंगे:



ऊपरी बाएँ में छोटा रंगीन आइकन आपके पृष्ठ के तत्वों का एक एनीमेशन है। एनीमेशन सत्यापन उपकरण खोलने के लिए इस आइकन पर क्लिक करें:

प्लेबैक कर्सर और कीफ्रेम

जैसा कि एनीमेशन निभाता है, आप एक लाल प्लेबैक कर्सर को समयरेखा के साथ आगे बढ़ते देखेंगे। इस कर्सर को माउस का उपयोग करके वांछित स्थान पर ले जाया जा सकता है।

इंटरफ़ेस की प्रत्येक पंक्ति पृष्ठ पर एनीमेशन के एक अलग तत्व का प्रतिनिधित्व करती है। आप देख सकते हैं कि प्रत्येक पंक्ति में गहरे संतृप्त रंग के साथ एक खंड है। यह एनीमेशन की लंबाई दिखाता है, और इसके बाद आने वाले लाइटर सेगमेंट एनीमेशन को दोहराते हैं।

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

मध्यवर्ती कीफ़्रेम

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

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

प्रश्न में कुंजी फ़्रेम के ऊपर सीधे प्लेबैक कर्सर रखें, और आपको पैनल के ऊपरी बाएँ कोने में एक समय टिकट दिखाई देगा, जो आपको बताएगा कि आप एनीमेशन में कितने सेकंड में हैं। फिर आप पता लगा सकते हैं कि इस बार एनीमेशन की कुल अवधि कितनी प्रतिशत है। नीचे दिए गए उदाहरण में, प्लेबैक कर्सर 2 सेकंड एनीमेशन के लगभग 1 सेकंड पर है, इसलिए हम जानते हैं कि यह कीफ़्रेम 50% है।

एनिमेशन देरी और अवधि

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

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



एनीमेशन की अवधि को बदलने के लिए, अपने पिछले कीफ़्रेम पर होवर करें जब तक आप द्विदिश कर्सर नहीं देखते हैं, और फिर इसे क्षैतिज रूप से खींचें। फिर से, स्टाइल्स टैब पर मान दिखाई देगा।

एनीमेशन समय समारोह

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



एक विंडो बेज़ियर वक्र दिखाती है, जो वर्तमान समय के फ़ंक्शन को प्रदर्शित करता है। यहां आप बाईं ओर के किसी एक थंबनेल पर क्लिक करके मौजूदा प्रीसेट का चयन कर सकते हैं, या आप बेज वक्र के लिए कस्टम मान बनाने के लिए वक्र की मुख्य छवि के मार्कर को खींच सकते हैं, जिसे आप तब अपने CSS पर कॉपी कर सकते हैं:



जैसा कि आप बदलते हैं, आप अपने समय समारोह में वर्तमान परिवर्तनों को प्रदर्शित करते हुए, संपादक के शीर्ष पर एक छोटी बैंगनी गेंद को बाएँ से दाएँ ले जाते हुए देखेंगे।

घूर्णन परतों का प्रतिपादन

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

परत पैनल खोलने के लिए, Chrome देव उपकरण मेनू पर जाएं और अधिक उपकरण> परतें चुनें।



जब परत टैब खुला होता है, तो ऊपरी बाएँ कोने में रोटेट मोड टूल चुनें:



अब आप इस उपकरण का उपयोग इस लेयर विज़ुअलाइज़ेशन को किसी भी कोण पर घुमाने के लिए कर सकते हैं, जिसमें आपको यह देखने की ज़रूरत है कि आपके एनीमेशन के हिस्से कैसे काम करते हैं:

समापन

आइए क्रोम एनीमेशन टूल्स पर एक नज़र डालें:

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

कभी-कभी सही एनीमेशन बनाना एक बहुत ही सटीक और सूक्ष्म प्रक्रिया हो सकती है। ये उपकरण आपके एनिमेशन के बारे में बहुत आवश्यक जानकारी प्रदान कर सकते हैं, साथ ही आपको उत्कृष्टता प्राप्त करने में मदद करने के लिए वास्तविक समय प्रतिक्रिया भी दे सकते हैं।