वेब ऐनिमेशन एपीआई, पहली बार 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 को चेतावनी भेजता है. ऐसा तब होता है, जब डैश वाले नामों का इस्तेमाल, keyframe ऐनिमेशन में बटन के लिए किया जाता है. इस्तेमाल करने के लिए सही स्ट्रिंग, सीएसएस प्रॉपर्टी के हिसाब से आईडीएल एट्रिब्यूट के कन्वर्ज़न एल्गोरिदम के हिसाब से कैमेल केस वाले नाम हैं.
उदाहरण के लिए, सीएसएस प्रॉपर्टी margin-left के लिए, आपको marginLeft को पासकोड के तौर पर डालना होगा.
Chrome 51 में, डैश वाले नामों के साथ काम करने की सुविधा पूरी तरह से हटा दी गई है. इसलिए, अब किसी भी मौजूदा कॉन्टेंट को स्पेसिफ़िकेशन के मुताबिक सही नाम देकर ठीक करने का अच्छा समय है.
खास जानकारी
इन बदलावों से, Chrome में वेब ऐनिमेशन को लागू करने का तरीका, दूसरे ब्राउज़र में लागू करने के तरीके से मिलता-जुलता हो गया है. साथ ही, यह स्पेसिफ़िकेशन के मुताबिक भी है. इससे, वेब पेज के कॉन्टेंट को आसानी से लिखा जा सकता है, ताकि अलग-अलग ब्राउज़र पर उसे आसानी से देखा जा सके.