Chrome DevTools के ऐनिमेशन पैनल वाले टैब की मदद से, ऐनिमेशन की जांच करें और उनमें बदलाव करें.
खास जानकारी
ऐनिमेशन कैप्चर करने के लिए, ऐनिमेशन टैब खोलें. यह ऐनिमेशन की अपने-आप पहचान करता है और उन्हें ग्रुप में क्रम से लगाता है.
ऐनिमेशन टैब के दो मुख्य मकसद हैं:
- ऐनिमेशन की जांच करें. ऐनिमेशन ग्रुप के लिए सोर्स कोड को धीमा करें, उसे फिर से चलाएं या उसकी जांच करें.
- ऐनिमेशन में बदलाव करें. किसी ऐनिमेशन ग्रुप के समय, देरी, अवधि या मुख्य-फ़्रेम ऑफ़सेट में बदलाव करें. मुख्य-फ़्रेम और बेज़ियर में बदलाव नहीं किए जा सकते.
ऐनिमेशन टैब में, सीएसएस ऐनिमेशन, सीएसएस ट्रांज़िशन, वेब ऐनिमेशन, और View ट्रांज़िशन एपीआई का इस्तेमाल किया जा सकता है.
requestAnimationFrame ऐनिमेशन अभी तक काम नहीं कर रहा है.
ऐनिमेशन ग्रुप क्या होता है?
ऐनिमेशन ग्रुप, ऐनिमेशन का एक सेट होता है. यह एक-दूसरे से जुड़े दिखते हैं.
फ़िलहाल, वेब पर ग्रुप ऐनिमेशन का कोई असल कॉन्सेप्ट नहीं है. इसलिए, मोशन डिज़ाइनर और डेवलपर अलग-अलग ऐनिमेशन बनाकर उन्हें एक विज़ुअल इफ़ेक्ट के तौर पर दिखाते हैं. ऐनिमेशन टैब, शुरुआत के समय (देरी को छोड़कर) के आधार पर मिलते-जुलते ऐनिमेशन का अनुमान लगाता है और उन्हें साथ-साथ ग्रुप करता है.
दूसरे शब्दों में, ऐनिमेशन टैब एक ही स्क्रिप्ट ब्लॉक में ट्रिगर हुए ऐनिमेशन को एक साथ ग्रुप करता है. हालांकि, अगर वे एसिंक्रोनस होते हैं, तो वे अलग-अलग ग्रुप में चले जाते हैं.
शुरू करें
ऐनिमेशन टैब खोलने के दो तरीके हैं:
DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें > ज़्यादा टूल > ऐनिमेशन चुनें.
इनमें से किसी एक को दबाकर निर्देश मेन्यू खोलें:
- macOS पर: Command+Shift+P
- Windows, Linux या ChromeOS पर: Control+Shift+P
इसके बाद,
Show Animationsटाइप करना शुरू करें और उससे जुड़ा ड्रॉर पैनल चुनें.
डिफ़ॉल्ट रूप से, ऐनिमेशन टैब, कंसोल पैनल के बगल में एक टैब के तौर पर खुलता है. पैनल टैब के तौर पर, इसे किसी भी पैनल के साथ इस्तेमाल किया जा सकता है या इसे DevTools में सबसे ऊपर ले जाया जा सकता है.
ऐनिमेशन टैब में चार मुख्य सेक्शन होते हैं:
- कंट्रोल. यहां से, कैप्चर किए गए ऐनिमेशन ग्रुप को ब्लॉक किया जा सकता है सभी हटाएं, ऐनिमेशन ग्रुप को रोकें रोकें या play_arrow फिर शुरू करें या चुने गए ऐनिमेशन ग्रुप की स्पीड बदलें.
खास जानकारी. आइकॉन से मार्क किए गए दो टाइप के कैप्चर किए गए ऐनिमेशन ग्रुप दिखाता है: माउस स्क्रोल-ड्रिवन और शेड्यूल सामान्य (समय के हिसाब से).
जांच करने और जानकारी पैनल में जाकर, इसमें बदलाव करने के लिए ऐनिमेशन ग्रुप चुनें.
टाइमलाइन. ऐनिमेशन ग्रुप के टाइप के आधार पर, टाइमलाइन इनमें से कोई भी हो सकती है:
- माउस स्क्रोल करके चलने वाले ऐनिमेशन के लिए पिक्सल में.
- समय के हिसाब से बनाए गए ऐनिमेशन को शेड्यूल करने के लिए, मिलीसेकंड में.
टाइमलाइन में, किसी ऐनिमेशन को फिर से फिर से चलाया जा सकता है, उसे स्क्रब किया जा सकता है या सीधे किसी खास पॉइंट पर जा सकते हैं.
विवरण. चुने गए ऐनिमेशन ग्रुप की जांच करें और उसमें बदलाव करें.
किसी ऐनिमेशन को कैप्चर करने के लिए, उसे ऐनिमेशन टैब के खुले होने पर ट्रिगर करें. अगर पेज लोड होने पर कोई ऐनिमेशन ट्रिगर होता है, तो उसे फिर से लोड करें.
ऐनिमेशन की जांच करें
कोई ऐनिमेशन कैप्चर करने के बाद, उसे फिर से चलाने के कुछ तरीके यहां दिए गए हैं:
- खास जानकारी पैनल में, इसके थंबनेल की झलक देखने के लिए, उस पर कर्सर घुमाएं.
- व्यूपोर्ट ऐनिमेशन को आगे-पीछे करने के लिए प्लेहेड (लाल वर्टिकल बार) को खींचें और छोड़ें या प्लेहेड को किसी खास पॉइंट पर सेट करने के लिए, टाइमलाइन पर कहीं भी क्लिक करें. अगर ऐनिमेशन पहले से चल रहा होगा, तो वह चलता रहेगा और रुक जाएगा.
- खास जानकारी पैनल से ऐनिमेशन ग्रुप चुनें (ताकि यह ब्यौरा पैनल में दिखे) और
फिर से चलाएं बटन दबाएं. ऐनिमेशन को व्यूपोर्ट में फिर से चलाया जाता है.
चुने गए ऐनिमेशन ग्रुप की झलक स्पीड बदलने के लिए, कंट्रोल बार में 
ऐनिमेशन स्पीड बटन पर क्लिक करें.
ऐनिमेशन की जानकारी देखें
ऐनिमेशन ग्रुप कैप्चर करने के बाद, उसकी जानकारी देखने के लिए खास जानकारी पैनल में उस पर क्लिक करें.
जानकारी पैनल में, हर ऐनिमेशन को उसकी अपनी लाइन मिलती है. संबंधित एलिमेंट का पूरा नाम देखने के लिए, नाम वाले कॉलम का साइज़ बदलें.
किसी ऐनिमेशन को व्यूपोर्ट में हाइलाइट करने के लिए, उस पर कर्सर घुमाएं. एलिमेंट पैनल में ऐनिमेशन चुनने के लिए, उस पर क्लिक करें.
अगर कुछ ऐनिमेशन की animation-iteration-count प्रॉपर्टी infinite पर सेट है, तो कुछ ऐनिमेशन हमेशा के लिए दोहराए जाते हैं. ऐनिमेशन टैब में, उनकी परिभाषाएं और उनके दोहराव दिखते हैं.
ऐनिमेशन के सबसे बाईं ओर मौजूद गहरे रंग वाले सेक्शन की परिभाषा होती है. दाएं, ज़्यादा धुंधले सेक्शन में दोहरावों को दिखाया गया है.
उदाहरण के लिए, अगले स्क्रीनशॉट में, सेक्शन दो और तीन, सेक्शन एक के इटरेशन को दिखाते हैं.
अगर दो एलिमेंट पर एक जैसा ऐनिमेशन लागू किया गया है, तो ऐनिमेशन टैब में उन्हें एक ही रंग असाइन किया जाता है. रंग किसी भी क्रम में हो सकता है और इसका कोई खास असर नहीं होता है. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में मौजूद
दो एलिमेंट div.eye.left::after और div.eye.right::after पर
div.feet::before और div.feet::after एलिमेंट की तरह ही एक जैसा ऐनिमेशन (eyes) लागू है.
ऐनिमेशन में बदलाव करना
ऐनिमेशन टैब की मदद से, ऐनिमेशन में बदलाव करने के तीन तरीके हैं:
- ऐनिमेशन की अवधि.
- कीफ़्रेम का समय.
- शुरू होने में लगने वाला समय.
इस सेक्शन के लिए, मान लें कि अगले स्क्रीनशॉट में ओरिजनल ऐनिमेशन है:
किसी ऐनिमेशन की अवधि बदलने के लिए, पहले या अंतिम सर्कल को खींचें और छोड़ें.
अगर ऐनिमेशन में किसी मुख्य-फ़्रेम के नियम तय किए जाते हैं, तो उन्हें सफ़ेद अंदरूनी सर्कल के तौर पर दिखाया जाता है. मुख्य-फ़्रेम का समय बदलने के लिए इनमें से किसी एक को खींचें और छोड़ें.
किसी ऐनिमेशन में देरी जोड़ने के लिए, सर्कल पर नहीं, बल्कि ऐनिमेशन पर क्लिक करें. इसके बाद, उसे कहीं भी खींचें और छोड़ें.
ऐनिमेशन के दौरान, ::view-transition के सूडो एलिमेंट में बदलाव करें
View ट्रांजिशन एपीआई की मदद से, दो स्थितियों के बीच ऐनिमेशन वाला ट्रांज़िशन बनाते समय, एक ही चरण में डीओएम को बदला जा सकता है. ऐनिमेशन के दौरान, एपीआई इस स्ट्रक्चर वाला एक स्यूडो-एलिमेंट ट्री बनाता है:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
इस स्ट्रक्चर में एलिमेंट > स्टाइल में बदलाव करने के लिए:
- DevTools खोलें और व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने वाले पेज की जांच करें. उदाहरण के लिए, यह डेमो पेज.
- ऐनिमेशन में, रोकें रोकें पर क्लिक करें.
पेज पर ऐनिमेशन ट्रिगर करें. ऐनिमेशन पैनल उसे कैप्चर कर लेता है और तुरंत रुक जाता है. अब आपके पास डीओएम में,
<head>एलिमेंट के सबसे ऊपर मौजूद::view-transitionस्ट्रक्चर देखने का विकल्प है.
एलिमेंट > स्टाइल में,
::view-transitionस्यूडो-एलिमेंट के सीएसएस में बदलाव करें.ऐनिमेशन को फिर से शुरू करें और नतीजा देखने के लिए, उसे फिर से चलाएं.
ज़्यादा जानकारी के लिए, 'ट्रांज़िशन एपीआई' के साथ आसान और बेहतर ट्रांज़िशन देखें.