वेब ऐनिमेशन - Element.animate() अब Chrome 36 में उपलब्ध है

Brendan Kenny

वेब पर ऐनिमेशन, पहले JavaScript का प्रांत था. हालांकि, दुनिया के मोबाइल पर जाने के बाद, ऐनिमेशन को सीएसएस में बदल दिया गया. ऐसा, डिक्लेरेटिव सिंटैक्स और ब्राउज़र के ऑप्टिमाइज़ेशन के लिए किया गया. मोबाइल पर 60fps की सुविधा हमेशा उपलब्ध होनी चाहिए. इसलिए, ब्राउज़र के लिए ऐसे विकल्प चुनें जिन्हें बेहतर तरीके से दिखाया जा सके.

JavaScript से चलने वाले ऐनिमेशन को ज़्यादा असरदार बनाने के लिए, ज़्यादा टूल उपलब्ध हो रहे हैं. हालांकि, एलान वाले और ज़रूरी ऐनिमेशन को एक साथ इस्तेमाल करना सबसे बेहतर है. इसमें, ऐनिमेशन लिखने का तरीका इस आधार पर तय किया जाता है कि कौनसा कोड सबसे आसान है, न कि कौनसा एक फ़ॉर्म में और कौनसा दूसरे फ़ॉर्म में काम करता है.

वेब ऐनिमेशन इस ज़रूरत को पूरा कर सकते हैं. इसका पहला हिस्सा, element.animate() के तौर पर Chrome 36 में लॉन्च हो चुका है. इस नए फ़ंक्शन की मदद से, पूरी तरह से JavaScript में ऐनिमेशन बनाया जा सकता है. साथ ही, इसे किसी भी सीएसएस ऐनिमेशन या ट्रांज़िशन की तरह ही चलाया जा सकता है. असल में, Chrome 34 के बाद, इन सभी तरीकों को चलाने के लिए एक ही वेब ऐनिमेशन इंजन का इस्तेमाल किया जाता है.

सिंटैक्स आसान है. अगर आपने कभी सीएसएस ट्रांज़िशन या ऐनिमेशन लिखा है, तो आपको इसके हिस्सों के बारे में पता होना चाहिए:

element.animate([
    {cssProperty: value0},
    {cssProperty: value1},
    {cssProperty: value2},
    //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

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

उदाहरण के लिए, पिछले साल सैंटा ट्रैकर के लिए, हम चाहते थे कि बर्फ़ लगातार गिरती रहे. इसलिए, हमने सीएसएस की मदद से इसे ऐनिमेट करने का फ़ैसला किया, ताकि इसे बेहतर तरीके से किया जा सके.

हालांकि, हम स्क्रीन और सीन में होने वाले इवेंट के आधार पर, बर्फ़ की हॉरिज़ॉन्टल पोज़िशन को डाइनैमिक तौर पर चुनना चाहते थे. साथ ही, बर्फ़ गिरने की ऊंचाई (उपयोगकर्ता की ब्राउज़र विंडो की ऊंचाई) तब तक नहीं पता चलेगी, जब तक हम इसे रन नहीं कर रहे होंगे. इसका मतलब है कि हमें सीएसएस ट्रांज़िशन का इस्तेमाल करना था, क्योंकि रनटाइम के दौरान सीएसएस ऐनिमेशन बनाना बहुत मुश्किल हो जाता है. साथ ही, सैकड़ों स्नोफ़्लेक का मतलब है कि स्टाइल के सैकड़ों नए नियम.

इसलिए, हमने यह तरीका अपनाया, जो आपको जाना-पहचाना लगेगा:

snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame
snowFlake.offsetWidth;
snowFlake.style.transitionProperty = 'transform';
snowFlake.style.transitionDuration = '1500ms';
snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';

'एक फ़्रेम इंतज़ार करें' टिप्पणी में ही अहम जानकारी है. ट्रांज़िशन शुरू करने के लिए, ब्राउज़र को यह स्वीकार करना होगा कि एलिमेंट शुरुआती पोज़िशन में है. ऐसा करने के कुछ तरीके हैं. सबसे सामान्य तरीकों में से एक, एलिमेंट की किसी ऐसी प्रॉपर्टी से पढ़ना है जो ब्राउज़र को लेआउट का हिसाब लगाने के लिए मजबूर करती है. इससे यह पक्का होता है कि एलिमेंट की आखिरी पोज़िशन पर ट्रांज़िशन करने से पहले, उसकी शुरुआती पोज़िशन की जानकारी हो. इस तरीके का इस्तेमाल करके, ब्राउज़र के अंदरूनी काम करने के तरीके के बारे में अपने बेहतर ज्ञान पर खुद को बधाई दी जा सकती है. हालांकि, हर कीस्ट्रोक से आपको अजीब लगेगा.

इसके उलट, element.animate() कॉल में साफ़ तौर पर बताया गया है कि क्या करना है:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

इसके अलावा, और भी कई विकल्प हैं. सीएसएस के एलिमेंट की तरह ही, वेब ऐनिमेशन में भी देरी की जा सकती है और उन्हें दोहराया जा सकता है:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
    duration: 1500,
    iterations: 10,
    delay: 300
});

AnimationPlayer

element.animate() असल में, एक AnimationPlayer ऑब्जेक्ट दिखाता है. वेब ऐनिमेशन की ज़्यादा सुविधाएं लॉन्च होने के साथ-साथ, इसकी ज़रूरत बढ़ती जाएगी. JavaScript और सीएसएस, दोनों से बनाए गए ऐनिमेशन में AnimationPlayer जुड़े होंगे. इससे, उन्हें आसानी से काम के और दिलचस्प तरीके से जोड़ा जा सकेगा.

फ़िलहाल, AnimationPlayer में सिर्फ़ दो सुविधाएं हैं, जो दोनों ही बहुत काम की हैं. AnimationPlayer.cancel() का इस्तेमाल करके, किसी भी समय ऐनिमेशन को रद्द किया जा सकता है:

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
// less than 1500ms later...changed my mind
player.cancel();

वेब ऐनिमेशन, खत्म होने पर हमेशा एक इवेंट ट्रिगर करते हैं. इससे, उन सभी लोगों को राहत मिलती है जिन्होंने पहले सीएसएस ऐनिमेशन या ट्रांज़िशन के आधार पर ऐनिमेशन सिस्टम बनाने की कोशिश की है:

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
player.onfinish = function(e) {
    console.log('per aspera ad terra!');
}

इसे आज़माएं

यह सुविधा, Chrome 36 में उपलब्ध है. इसे आज बीटा वर्शन में लॉन्च किया जा रहा है! अगर आपको इसे आज़माना है, तो Chrome 36 में नेटिव तरीके से लागू करने की सुविधा का इस्तेमाल करें. हालांकि, वेब ऐनिमेशन पॉलीफ़िल है, जो किसी भी आधुनिक, एवरग्रीन ब्राउज़र में वेब ऐनिमेशन स्पेसिफ़िकेशन का ज़्यादातर हिस्सा लाता है.

बर्फ़ के इफ़ेक्ट का डेमो उपलब्ध है. इसमें element.animate() के नेटिव वर्शन और पॉलीफ़िल, दोनों का इस्तेमाल करके इफ़ेक्ट को आज़माया जा सकता है.

हमें आपकी राय का इंतज़ार है

हालांकि, यह आने वाली सुविधाओं की झलक है. इसे खास तौर पर, डेवलपर से तुरंत सुझाव, शिकायत या राय पाने के लिए रिलीज़ किया जा रहा है. हमें अभी तक यह पक्का नहीं है कि हमने इस्तेमाल के हर उदाहरण को पूरा किया है या ऐनिमेशन के लिए मौजूदा एपीआई के हर समस्या को ठीक किया है. डेवलपर इसे आज़माकर, हमें बताएं कि उन्हें यह सुविधा कैसी लगी. इससे हमें यह जानने और इसे बेहतर बनाने में मदद मिलेगी.

इस पोस्ट पर की गई टिप्पणियां ज़रूर अहम हैं. साथ ही, स्टैंडर्ड के बारे में टिप्पणियां, public-fx मेलिंग सूची के ज़रिए सीएसएस और एसवीजी वर्किंग ग्रुप को भेजी जा सकती हैं.

अक्टूबर 2014 का अपडेट: Chrome 39 में, वीडियो चलाने की सुविधा को कंट्रोल करने के लिए कई अन्य तरीके जोड़े गए हैं. जैसे, play(), pause(), और reverse(). यह currentTime प्रॉपर्टी की मदद से, ऐनिमेशन की टाइमलाइन में किसी खास पॉइंट पर जाने की सुविधा भी देता है. इस सुविधा को इस नए डेमो में देखा जा सकता है.

इस पोस्ट को तैयार करने में मदद करने के लिए, Addy Osmani और Max Heinritz का धन्यवाद.