वेब ऐनिमेशन से जुड़े संसाधन

Web Animations API, JavaScript से ज़रूरी ऐनिमेशन के बारे में बताने के लिए दमदार प्रिमिटिव देता है - लेकिन इसका क्या मतलब है? Google के डेमो और कोडलैब सहित आपके लिए उपलब्ध संसाधनों के बारे में जानें.

बैकग्राउंड

मुख्य तौर पर, यह एपीआई Element.animate() तरीका उपलब्ध कराता है. आइए, एक उदाहरण देखते हैं, जिसमें बैकग्राउंड के रंग को लाल से हरे रंग में दिखाया जाता है.

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

यह तरीका सभी मॉडर्न ब्राउज़र में काम करता है. इसमें अच्छी तरह से पॉलीफ़िल फ़ॉलबैक शामिल किया जा सकता है. इस बारे में ज़्यादा जानकारी बाद में दी जाती है. इस तरीके के लिए स्थानीय सहायता - और इसका प्लेयर ऑब्जेक्ट - Chrome 39 के हिस्से के रूप में बड़े पैमाने पर उपलब्ध हो गया था. यह Opera में मूल रूप से भी उपलब्ध है और Firefox के लिए सक्रिय विकास में है. यह एक ताकतवर प्रिमिटिव है, जिसे आपके टूलबॉक्स में जगह दी जानी चाहिए.

कोड लैब

Web Animations API के लिए कोडलैब की संख्या लगातार बढ़ रही है. ये अपने-आप चलने वाली गाइड हैं, जो एपीआई में अलग-अलग सिद्धांतों को दिखाती हैं. इनमें से ज़्यादातर कोडलैब में, स्टैटिक कॉन्टेंट लिया जा सकता है और उसे ऐनिमेशन इफ़ेक्ट की मदद से बेहतर बनाया जा सकता है.

अगर आपको वेब ऐनिमेशन में उपलब्ध नए प्रिमिटिव के बारे में जानना है, तो ये कोडलैब और इनसे जुड़े लिंक या रिसॉर्स सबसे बेहतर तरीके से काम करेंगे. Android से प्रेरित होकर क्या बनाया जा सकता है, यह जानने के लिए Android की मदद से बनाया गया यह इफ़ेक्ट आज़माएं-

इसलिए, अगर आपने अभी शुरुआत की है, तो और इंतज़ार करने की ज़रूरत नहीं!

डेमो

अगर आपको प्रेरणा चाहिए, तो मटीरियल से प्रेरित वेब ऐनिमेशन डेमो देखना न भूलें. यहां दिए गए सोर्स को GitHub पर होस्ट किया गया है. इनमें कई तरह के शानदार इफ़ेक्ट दिखाए जाते हैं और हर डेमो के सोर्स कोड को इनलाइन देखा जा सकता है.

डेमो में रंगीन घूमती हुई गैलेक्सी, घूती हुई पृथ्वी या यहां तक कि एक सादे पुराने एलिमेंट पर कई तरह के इफ़ेक्ट भी शामिल हैं.

पॉलीफ़िल

सभी मॉडर्न ब्राउज़र पर बेहतर तरीके से काम करने के लिए, पॉलीफ़िल लाइब्रेरी का इस्तेमाल किया जा सकता है. Web Animations API में अभी पॉलीफ़िल उपलब्ध है, जो इसे सभी आधुनिक ब्राउज़र पर उपलब्ध कराता है. इनमें Internet Explorer, Firefox, और Safari भी शामिल हैं.

अगर आपको आनंद आ रहा है, तो वेब ऐनिमेशन-अगला पॉलीफ़िल इस्तेमाल करें. इसमें वे सुविधाएं भी शामिल हैं जिन्हें अभी तक फ़ाइनल नहीं किया गया है - जैसे, कंपोज़ेबल GroupEffect और SequenceEffect कंस्ट्रक्टर. दो पॉलीफ़िल के बीच तुलना के लिए, कृपया होम पेज देखें.

कोड में पॉलीफ़िल का इस्तेमाल करने के लिए, आपके पास कुछ विकल्प हैं.

1. cdnjs, jsDelivr जैसे किसी सीडीएन का इस्तेमाल करें या rawgit.com के ज़रिए किसी खास रिलीज़ को टारगेट करें

2. 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 का इस्तेमाल करने वाले कुछ नमूनों के लिए, एरिक विलिगर्स का दस्तावेज़ देखें.