वेब ऐनिमेशन एपीआई, पहली बार Chrome 36 में शिप किया गया था. यह ब्राउज़र में ऐनिमेशन के लिए, JavaScript से आसानी से कंट्रोल करने की सुविधा देता है. इसे Gecko और WebKit में भी लागू किया जा रहा है.
Chrome 50 में कुछ बदलाव किए गए हैं, ताकि अन्य ब्राउज़र के साथ बेहतर तरीके से काम किया जा सके और स्पेसिफ़िकेशन का ज़्यादा से ज़्यादा पालन किया जा सके. ये बदलाव ये हैं:
- इवेंट रद्द करना
Animation.idpause()तरीके के लिए स्टेटस में बदलाव- कीवर्ड के तौर पर, डैश वाले नामों का इस्तेमाल बंद करना
Chrome 51 में, इनमें से कुछ बदलावों को फ़ाइनल कर दिया गया है:
- मुख्य फ़्रेम में, डैश वाले नामों को कुंजियों के तौर पर हटाना
इवेंट रद्द करना
ऐनिमेशन इंटरफ़ेस में, ऐनिमेशन रद्द करने का एक तरीका शामिल है. इसे cancel() कहा जाता है.
Chrome 50 में, स्पेसिफ़िकेशन के मुताबिक, 'रद्द करें' इवेंट को ट्रिगर करने की सुविधा लागू की गई है. यह सुविधा, oncancel एट्रिब्यूट के ज़रिए इवेंट मैनेजमेंट को ट्रिगर करती है. हालांकि, इसके लिए ज़रूरी है कि oncancel एट्रिब्यूट को शुरू किया गया हो.
Animation.id के लिए सहायता
element.animate() का इस्तेमाल करके ऐनिमेशन बनाते समय, कई प्रॉपर्टी पास की जा सकती हैं. उदाहरण के लिए, किसी ऑब्जेक्ट पर ऑपैसिटी को ऐनिमेट करने का उदाहरण यहां दिया गया है:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id प्रॉपर्टी की जानकारी देने पर, यह Animation ऑब्जेक्ट पर सेट हो जाएगी. इससे, कॉन्टेंट को डीबग करने में मदद मिलती है. ऐसा तब किया जा सकता है, जब आपके पास Animation ऑब्जेक्ट की संख्या ज़्यादा हो. यहां एक उदाहरण दिया गया है, जिसमें बताया गया है कि किसी ऐनिमेशन के लिए id कैसे तय किया जाता है:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
pause() तरीके के लिए स्टेटस में बदलाव
pause()
तरीका का इस्तेमाल, चल रहे ऐनिमेशन को रोकने के लिए किया जाता है. अगर playState एट्रिब्यूट का इस्तेमाल करके ऐनिमेशन की स्थिति देखी जाती है, तो paused() तरीके को कॉल करने के बाद, यह paused पर सेट हो जाना चाहिए. Chrome के 50 से पहले के वर्शन में, अगर ऐनिमेशन शुरू नहीं हुआ था, तो playState एट्रिब्यूट idle दिखाता था. हालांकि, अब यह सही स्थिति दिखाता है, जो paused है.
मुख्य फ़्रेम में, डैश वाले नामों को कुंजियों के तौर पर हटाना
खास जानकारी और अन्य तरीकों का पालन करने के लिए, Chrome 50, डैश वाले नामों का इस्तेमाल करने पर, Console को चेतावनी भेजता है. ऐसा तब होता है, जब मुख्य फ़्रेम वाले ऐनिमेशन में बटन के लिए डैश वाले नामों का इस्तेमाल किया जाता है. इस्तेमाल करने के लिए सही स्ट्रिंग, camelCase नाम हैं. ये नाम, सीएसएस प्रॉपर्टी से आईडीएल एट्रिब्यूट के कन्वर्ज़न एल्गोरिदम के हिसाब से होते हैं.
उदाहरण के लिए, सीएसएस प्रॉपर्टी margin-left के लिए, आपको marginLeft को पासकोड के तौर पर डालना होगा.
Chrome 51 में, डैश वाले नामों के साथ काम करने की सुविधा पूरी तरह से हटा दी गई है. इसलिए, अब किसी भी मौजूदा कॉन्टेंट को स्पेसिफ़िकेशन के मुताबिक सही नाम देकर ठीक करने का अच्छा समय है.
खास जानकारी
इन बदलावों से, Chrome में वेब ऐनिमेशन को लागू करने का तरीका, दूसरे ब्राउज़र में लागू करने के तरीके से मिलता-जुलता हो गया है. साथ ही, यह स्पेसिफ़िकेशन के मुताबिक भी है. इससे, वेब पेज के कॉन्टेंट को आसानी से लिखा जा सकता है, ताकि अलग-अलग ब्राउज़र पर उसे आसानी से देखा जा सके.