वेब ऐनिमेशन एपीआई, JavaScript से इंपेरेटिव ऐनिमेशन की जानकारी देने के लिए असरदार प्रिमिटिव देता है - लेकिन इसका क्या मतलब है? आपके लिए उपलब्ध संसाधनों के बारे में जानें. इनमें Google के डेमो और codelabs शामिल हैं.
बैकग्राउंड
एपीआई, Element.animate() तरीका उपलब्ध कराता है.
चलिए एक उदाहरण देखते हैं, जिसमें बैकग्राउंड का रंग लाल से हरे रंग में ऐनिमेट होता है-
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
यह तरीका, बेहतरीन पॉलीफ़िल फ़ॉलबैक के साथ सभी मॉडर्न ब्राउज़र में काम करता है. इस बारे में ज़्यादा जानकारी बाद में मिलेगी. इस तरीके और उसके प्लेयर ऑब्जेक्ट के लिए, Chrome 39 के हिस्से के तौर पर नेटिव सपोर्ट उपलब्ध हो गया. यह सुविधा Opera में नेटिव तौर पर भी उपलब्ध है. साथ ही, Firefox के लिए इस पर काम चल रहा है. यह एक बेहतरीन प्रिमिटिव है, जिसे आपके टूलबॉक्स में शामिल किया जाना चाहिए.
कोड लैब
वेब ऐनिमेशन एपीआई के लिए, कोडलैब की संख्या लगातार बढ़ रही है. इन सुविधाओं की मदद से अपने-आप काम करने वाली गाइड, एपीआई में अलग-अलग कॉन्सेप्ट दिखाती हैं. इनमें से ज़्यादातर कोडलैब में, आपको स्टैटिक कॉन्टेंट शामिल करना होगा और ऐनिमेशन इफ़ेक्ट की मदद से उसे बेहतर बनाना होगा.
अगर आपको वेब ऐनिमेशन में उपलब्ध नए प्रिमिटिव को समझना है, तो शुरुआत करने के लिए ये कोडलैब और इनसे जुड़े लिंक या संसाधन सबसे सही जगह हैं. Android से प्रेरित होकर बनाए गए इस इफ़ेक्ट को देखें-
अगर आपने हाल ही में शुरुआत की है, तो आपको कहीं और जाने की ज़रूरत नहीं है!
डेमो
अगर आपको प्रेरणा चाहिए, तो Material से प्रेरित वेब ऐनिमेशन के डेमो देखना न भूलें. इनका सोर्स GitHub पर होस्ट किया गया है. इनमें कई तरह के शानदार इफ़ेक्ट दिखाए गए हैं. साथ ही, हर डेमो का सोर्स कोड इनलाइन देखा जा सकता है.
डेमो में, रंगीन स्पिनिंग गैलेक्सी, घूमती हुई धरती या किसी सामान्य एलिमेंट पर अलग-अलग तरह के इफ़ेक्ट शामिल हैं.
Polyfill
सभी आधुनिक ब्राउज़र पर बेहतर तरीके से काम करने के लिए, polyfill लाइब्रेरी का इस्तेमाल किया जा सकता है. वेब ऐनिमेशन एपीआई के लिए, फ़िलहाल पॉलीफ़िल उपलब्ध है. इससे यह सभी आधुनिक ब्राउज़र पर काम करता है. जैसे, Internet Explorer, Firefox, और Safari.
अगर आपको एक्सपेरिमेंट करना है, तो web-animations-next polyfill का इस्तेमाल किया जा सकता है. इसमें ऐसी सुविधाएं भी शामिल हैं जिन पर अभी काम चल रहा है. जैसे, कंपोज करने लायक GroupEffect और SequenceEffect कन्स्ट्रक्टर.
दोनों पॉलीफ़िल की तुलना करने के लिए, कृपया होम पेज देखें.
अपने कोड में पॉलीफ़िल का इस्तेमाल करने के लिए, आपको कुछ विकल्प मिलते हैं.
cdnjs, jsDelivr जैसे सीडीएन का इस्तेमाल करें या rawgit.com की मदद से किसी खास रिलीज़ को टारगेट करें
NPM या Bower की मदद से इंस्टॉल करना
$ npm install web-animations-js $ bower install web-animations-js ```
सभी मामलों में, किसी भी दूसरे कोड से पहले स्क्रिप्ट टैग में पॉलीफ़िल को शामिल किया जा सकता है-
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
अन्य संसाधन
अगर आपको इस बारे में ज़्यादा तकनीकी जानकारी चाहिए, तो कृपया W3C स्पेसिफ़िकेशन देखें.
डैन विल्सन ने वेब ऐनिमेशन के बारे में कई बेहतरीन पोस्ट भी लिखी हैं. इनमें, नई सीएसएस motion-path प्रॉपर्टी के साथ इसका इस्तेमाल करने का तरीका भी बताया गया है.
motion-path का इस्तेमाल करने के कुछ सैंपल के लिए, एरिक विलिगर का दस्तावेज़ देखें.