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