Web Animations API, JavaScript से ज़रूरी ऐनिमेशन के बारे में बताने के लिए, पावरफ़ुल प्रिमिटिव उपलब्ध कराता है. हालांकि, इसका क्या मतलब है? आपके लिए उपलब्ध संसाधनों के बारे में जानें. इनमें Google के डेमो और कोड लैब शामिल हैं.
बैकग्राउंड
बुनियादी तौर पर, एपीआई Element.animate() तरीका उपलब्ध कराता है.
आइए, एक उदाहरण देखते हैं. इसमें बैकग्राउंड के रंग को लाल से हरे रंग में ऐनिमेशन के साथ दिखाया गया है-
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
यह तरीका, सभी मॉडर्न ब्राउज़र पर काम करता है. साथ ही, इसमें बेहतर पॉलीफ़िल फ़ॉलबैक (इसके बारे में बाद में ज़्यादा जानकारी दी गई है) की सुविधा मिलती है. इस तरीके और इसके प्लेयर ऑब्जेक्ट के लिए नेटिव सपोर्ट, Chrome 39 के हिस्से के तौर पर बड़े पैमाने पर उपलब्ध हो गया. यह सुविधा, Opera में पहले से उपलब्ध है. साथ ही, Firefox के लिए इस पर काम चल रहा है. यह एक बहुत ही काम का प्रिमिटिव है. इसलिए, इसे अपने टूलबॉक्स में ज़रूर शामिल करें.
कोडलैब
Web Animations API के लिए, कोडलैब की संख्या लगातार बढ़ रही है. ये अपनी रफ़्तार से सीखी जाने वाली गाइड हैं. इनमें एपीआई के अलग-अलग कॉन्सेप्ट के बारे में बताया गया है. इनमें से ज़्यादातर कोडलैब में, आपको स्टैटिक कॉन्टेंट को ऐनिमेशन इफ़ेक्ट के साथ बेहतर बनाने का तरीका बताया जाएगा.
अगर आपको Web Animations में उपलब्ध नई प्रिमिटिव के बारे में जानना है, तो ये कोडलैब और इनसे जुड़े लिंक या संसाधन सबसे अच्छी जगह हैं. आपको किस तरह का ऐप्लिकेशन बनाना है, इसका आइडिया पाने के लिए, Android से मिलता-जुलता यह ऐप्लिकेशन देखें-
इसलिए, अगर आपने हाल ही में वीडियो बनाना शुरू किया है, तो आपको किसी और प्लैटफ़ॉर्म पर जाने की ज़रूरत नहीं!
डेमो
अगर आपको प्रेरणा चाहिए, तो Web Animations Demos ज़रूर देखें. ये डेमो, Material Design से मिलते-जुलते हैं. इनका सोर्स GitHub पर होस्ट किया गया है. इनमें कई तरह के बेहतरीन इफ़ेक्ट दिखाए गए हैं. साथ ही, हर डेमो का सोर्स कोड इनलाइन देखा जा सकता है.
इन डेमो में, रंग-बिरंगी घूमती हुई गैलेक्सी, घूमती हुई पृथ्वी या किसी सामान्य एलिमेंट पर कई तरह के इफ़ेक्ट शामिल हैं.
पॉलीफ़िल
सभी मॉडर्न ब्राउज़र पर बेहतर तरीके से काम करने के लिए, polyfill लाइब्रेरी का इस्तेमाल किया जा सकता है. Web Animations API के लिए, फ़िलहाल एक पॉलीफ़िल उपलब्ध है. इससे यह API, Internet Explorer, Firefox, और Safari जैसे सभी मॉडर्न ब्राउज़र पर काम करता है.
अगर आपको नई सुविधाएं आज़मानी हैं, तो web-animations-next पॉलीफ़िल का इस्तेमाल किया जा सकता है. इसमें ऐसी सुविधाएं भी शामिल हैं जिन्हें अभी फ़ाइनल नहीं किया गया है. जैसे, कंपोज़ेबल 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 का इस्तेमाल करने वाले कुछ सैंपल के लिए, एरिक विलियर्स का दस्तावेज़ देखें.