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