सीएसएस बनाम JavaScript ऐनिमेशन

सीएसएस या JavaScript की मदद से ऐनिमेट किया जा सकता है. आपको किसका इस्तेमाल करना चाहिए और क्यों?

पॉल लुइस

सैम थोरोगुड

वेब पर ऐनिमेशन बनाने के दो मुख्य तरीके हैं: सीएसएस और JavaScript की मदद से. इनमें से कौनसा विकल्प चुना जाता है, यह आपके प्रोजेक्ट की अन्य चीज़ों पर निर्भर करता है और यह भी देखा जाता है कि आपको किस तरह के इफ़ेक्ट चाहिए.

खास जानकारी

• आसान "वन-शॉट" ट्रांज़िशन के लिए, सीएसएस ऐनिमेशन का इस्तेमाल करें. जैसे, यूज़र इंटरफ़ेस (यूआई) एलिमेंट की स्थितियों को टॉगल करना.
• बाउंस करने, रोकने, रोकने, पीछे करने या धीमा करने जैसे बेहतर इफ़ेक्ट के लिए, JavaScript ऐनिमेशन का इस्तेमाल करें.
• अगर आपको JavaScript को ऐनिमेट करना है, तो Web webs API या ऐसे मॉडर्न फ़्रेमवर्क का इस्तेमाल करें जो आपके लिए सहज हो.

ज़्यादातर बेसिक ऐनिमेशन, सीएसएस या JavaScript की मदद से बनाए जा सकते हैं. हालांकि, इसे बनाने में लगने वाला समय और इसे इस्तेमाल करने में लगने वाला समय, दोनों अलग-अलग होते हैं (सीएसएस बनाम JavaScript की परफ़ॉर्मेंस भी देखें). दोनों के अपने फ़ायदे और नुकसान हैं, लेकिन ये अच्छे दिशा-निर्देश हैं:

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

इसके अलावा, अगर पहले से ही JavaScript फ़्रेमवर्क का इस्तेमाल किया जा रहा है जिसमें ऐनिमेशन फ़ंक्शन शामिल है, जैसे कि jQuery की .animate() तरीके या ग्रीनसॉक का TweenMax टेक्नोलॉजी का इस्तेमाल करके, तो अपने ऐनिमेशन के लिए यह तरीका इस्तेमाल करना ज़्यादा आसान हो सकता है.

सीएसएस की मदद से ऐनिमेट करें

स्क्रीन पर किसी चीज़ को चलाने का सबसे आसान तरीका सीएसएस की मदद से ऐनिमेट करना है. इस तरीके को घोषणा के तौर पर बताया गया है, क्योंकि आप तय करते हैं कि आपको क्या करना है.

नीचे कुछ ऐसे सीएसएस दिए गए हैं जो X और Y, दोनों ऐक्सिस में एलिमेंट 100px की जगह बदल रहे हैं. इसके लिए, सीएसएस ट्रांज़िशन का इस्तेमाल किया जाता है, जिसमें 500ms लगने वाला है. जब move क्लास जोड़ी जाती है, तो transform वैल्यू बदल जाती है और ट्रांज़िशन शुरू हो जाता है.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

इसे आज़माएँ

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

अगर ऊपर दिए गए स्निपेट की तरह, अपने ऐनिमेशन मैनेज करने के लिए अलग-अलग सीएसएस क्लास बनाई जाती हैं, तो हर ऐनिमेशन को चालू और बंद करने के लिए JavaScript का इस्तेमाल किया जा सकता है:

box.classList.add('move');

ऐसा करने से आपके ऐप्लिकेशन ठीक से काम करते हैं. JavaScript की मदद से स्थिति को मैनेज करने पर फ़ोकस करें. साथ ही, टारगेट एलिमेंट पर सही क्लास सेट करें. इसके बाद, ब्राउज़र को ऐनिमेशन मैनेज करने के लिए छोड़ दें. इस तरीके से नीचे जाने पर, एलिमेंट पर transitionend इवेंट सुने जा सकते हैं. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब Internet Explorer के पुराने वर्शन काम न करें. वर्शन 10, इन इवेंट के साथ काम करने वाला पहला वर्शन था. अन्य सभी ब्राउज़र कुछ समय के लिए इवेंट का समर्थन करते हैं.

ट्रांज़िशन की समाप्ति को सुनने के लिए ज़रूरी JavaScript ऐसा दिखता है:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

सीएसएस ट्रांज़िशन का इस्तेमाल करने के साथ-साथ, सीएसएस ऐनिमेशन का भी इस्तेमाल किया जा सकता है. इससे आपको अलग-अलग ऐनिमेशन मुख्य-फ़्रेम, अवधि, और दोहराने की सुविधा पर ज़्यादा कंट्रोल मिलता है.

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

उदाहरण के लिए, ट्रांज़िशन की तरह ही बॉक्स को भी ऐनिमेट किया जा सकता है. हालांकि, उपयोगकर्ता के इंटरैक्शन के बिना, जैसे कि क्लिक किए बिना और बार-बार किए जाने वाले बदलावों के साथ उसे ऐनिमेट करें. एक साथ कई प्रॉपर्टी बदली भी जा सकती हैं.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

इसे आज़माएँ

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

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

JavaScript और Web ऐनिमेशन एपीआई के साथ ऐनिमेट करें

तुलना करके, JavaScript का इस्तेमाल करके ऐनिमेशन बनाना, सीएसएस ट्रांज़िशन या ऐनिमेशन लिखने के मुकाबले ज़्यादा मुश्किल है. हालांकि, आम तौर पर इससे डेवलपर को ज़्यादा बेहतर नतीजे मिलते हैं. किसी सीएसएस प्रॉपर्टी को ऐनिमेट करने या कंपोज़ेबल इफ़ेक्ट ऑब्जेक्ट बनाने के लिए, Web webs API का इस्तेमाल किया जा सकता है.

JavaScript ऐनिमेशन को अपने कोड के हिस्से के रूप में इनलाइन लिखना ज़रूरी है. उन्हें किसी अन्य ऑब्जेक्ट के अंदर भी एन्कैप्सुलेट किया जा सकता है. नीचे वह JavaScript दिया गया है जिसे आपको ऊपर बताए गए सीएसएस ट्रांज़िशन को फिर से बनाने के लिए लिखना होगा:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

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

इसे आज़माएँ

Web webs API, W3C की तुलना में एक नया स्टैंडर्ड है. यह ज़्यादातर आधुनिक ब्राउज़र में नेटिव तौर पर काम करती है. साथ काम न करने वाले मॉडर्न ब्राउज़र के लिए, पॉलीफ़िल की सुविधा उपलब्ध है.

JavaScript ऐनिमेशन की मदद से, हर चरण पर किसी एलिमेंट की स्टाइल को पूरी तरह से कंट्रोल किया जा सकता है. इसका मतलब है कि ऐनिमेशन को धीमा किया जा सकता है, रोका जा सकता है, बंद किया जा सकता है, रिवर्स किया जा सकता है, और एलिमेंट में अपने हिसाब से बदलाव किया जा सकता है. यह खास तौर पर तब मददगार होता है, जब आप जटिल और ऑब्जेक्ट-ओरिएंटेड ऐप्लिकेशन बना रहे हों. ऐसा इसलिए, क्योंकि आप अपने व्यवहार को सही तरीके से सीमित कर सकते हैं.