ऐनिमेशन: सीएसएस ऐनिमेशन के इफ़ेक्ट की जांच करें और उनमें बदलाव करें

Sofia Emelianova
Sofia Emelianova

Chrome DevTools के ऐनिमेशन पैनल वाले टैब की मदद से, ऐनिमेशन की जांच करें और उनमें बदलाव करें.

खास जानकारी

ऐनिमेशन कैप्चर करने के लिए, ऐनिमेशन टैब खोलें. यह ऐनिमेशन की अपने-आप पहचान करता है और उन्हें ग्रुप में क्रम से लगाता है.

ऐनिमेशन टैब के दो मुख्य मकसद हैं:

  • ऐनिमेशन की जांच करें. ऐनिमेशन ग्रुप के लिए सोर्स कोड को धीमा करें, उसे फिर से चलाएं या उसकी जांच करें.
  • ऐनिमेशन में बदलाव करें. किसी ऐनिमेशन ग्रुप के समय, देरी, अवधि या मुख्य-फ़्रेम ऑफ़सेट में बदलाव करें. मुख्य-फ़्रेम और बेज़ियर में बदलाव नहीं किए जा सकते.

ऐनिमेशन टैब में, सीएसएस ऐनिमेशन, सीएसएस ट्रांज़िशन, वेब ऐनिमेशन, और View ट्रांज़िशन एपीआई का इस्तेमाल किया जा सकता है. requestAnimationFrame ऐनिमेशन अभी तक काम नहीं कर रहा है.

ऐनिमेशन ग्रुप क्या होता है?

ऐनिमेशन ग्रुप, ऐनिमेशन का एक सेट होता है. यह एक-दूसरे से जुड़े दिखते हैं.

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

दूसरे शब्दों में, ऐनिमेशन टैब एक ही स्क्रिप्ट ब्लॉक में ट्रिगर हुए ऐनिमेशन को एक साथ ग्रुप करता है. हालांकि, अगर वे एसिंक्रोनस होते हैं, तो वे अलग-अलग ग्रुप में चले जाते हैं.

शुरू करें

ऐनिमेशन टैब खोलने के दो तरीके हैं:

  • ज़्यादा दिखाएँ। DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें > ज़्यादा टूल > ऐनिमेशन चुनें. मेन्यू में ऐनिमेशन.
  • इनमें से किसी एक को दबाकर निर्देश मेन्यू खोलें:

    • macOS पर: Command+Shift+P
    • Windows, Linux या ChromeOS पर: Control+Shift+P

    इसके बाद, Show Animations टाइप करना शुरू करें और उससे जुड़ा ड्रॉर पैनल चुनें. ऐनिमेशन दिखाएं.

डिफ़ॉल्ट रूप से, ऐनिमेशन टैब, कंसोल पैनल के बगल में एक टैब के तौर पर खुलता है. पैनल टैब के तौर पर, इसे किसी भी पैनल के साथ इस्तेमाल किया जा सकता है या इसे DevTools में सबसे ऊपर ले जाया जा सकता है.

खाली एनिमेशन टैब.

ऐनिमेशन टैब में चार मुख्य सेक्शन होते हैं:

ऐनिमेशन पैनल के सेक्शन.

  1. कंट्रोल. यहां से, कैप्चर किए गए ऐनिमेशन ग्रुप को ब्लॉक किया जा सकता है सभी हटाएं, ऐनिमेशन ग्रुप को रोकें रोकें या play_arrow फिर शुरू करें या चुने गए ऐनिमेशन ग्रुप की स्पीड बदलें.
  2. खास जानकारी. जांच करने और जानकारी पैनल में जाकर, इसमें बदलाव करने के लिए ऐनिमेशन ग्रुप चुनें.
  3. टाइमलाइन. फिर से चलाएं ऐनिमेशन को फिर से चलाएं, आगे-पीछे करें या किसी खास पॉइंट पर जाएं.
  4. विवरण. चुने गए ऐनिमेशन ग्रुप की जांच करें और उसमें बदलाव करें.

किसी ऐनिमेशन को कैप्चर करने के लिए, उसे ऐनिमेशन टैब के खुले होने पर ट्रिगर करें. अगर पेज लोड होने पर कोई ऐनिमेशन ट्रिगर होता है, तो उसे फिर से लोड करें.

ऐनिमेशन की जांच करें

कोई ऐनिमेशन कैप्चर करने के बाद, उसे फिर से चलाने के कुछ तरीके यहां दिए गए हैं:

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

चुने गए ऐनिमेशन ग्रुप की झलक स्पीड बदलने के लिए, कंट्रोल बार में ऐनिमेशन की स्पीड बढ़ाने वाला बटन. ऐनिमेशन स्पीड बटन पर क्लिक करें.

ऐनिमेशन की जानकारी देखें

ऐनिमेशन ग्रुप कैप्चर करने के बाद, उसकी जानकारी देखने के लिए खास जानकारी पैनल में उस पर क्लिक करें.

जानकारी पैनल में, हर ऐनिमेशन को उसकी अपनी लाइन मिलती है. संबंधित एलिमेंट का पूरा नाम देखने के लिए, नाम वाले कॉलम का साइज़ बदलें.

ब्यौरे वाला पैनल.

किसी ऐनिमेशन को व्यूपोर्ट में हाइलाइट करने के लिए, उस पर कर्सर घुमाएं. एलिमेंट पैनल में ऐनिमेशन चुनने के लिए, उस पर क्लिक करें.

किसी ऐनिमेशन को व्यूपोर्ट में हाइलाइट करने के लिए उस पर कर्सर घुमाना.

अगर कुछ ऐनिमेशन की 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)

इस स्ट्रक्चर में एलिमेंट > स्टाइल में बदलाव करने के लिए:

  1. DevTools खोलें और व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने वाले पेज की जांच करें. उदाहरण के लिए, यह डेमो पेज.
  2. ऐनिमेशन में, रोकें रोकें पर क्लिक करें.
  3. पेज पर ऐनिमेशन ट्रिगर करें. ऐनिमेशन पैनल उसे कैप्चर कर लेता है और तुरंत रुक जाता है. अब आपके पास डीओएम में, <head> एलिमेंट के सबसे ऊपर मौजूद ::view-transition स्ट्रक्चर देखने का विकल्प है.

    ::view-transition pseudo-element के सीएसएस में बदलाव किया जा रहा है.

  4. एलिमेंट > स्टाइल में, ::view-transition स्यूडो-एलिमेंट के सीएसएस में बदलाव करें.

  5. ऐनिमेशन को फिर से शुरू करें और नतीजा देखने के लिए, उसे फिर से चलाएं.

ज़्यादा जानकारी के लिए, 'ट्रांज़िशन एपीआई' के साथ आसान और बेहतर ट्रांज़िशन देखें.