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

पहले वेब पर ऐनिमेशन के लिए JavaScript का इस्तेमाल किया जाता था. हालांकि, जैसे-जैसे पूरी दुनिया में मोबाइल की ओर बढ़ने लगा, वैसे-वैसे ऐनिमेशन डिक्लेरेटिव सिंटैक्स के लिए सीएसएस का इस्तेमाल करने लगे. साथ ही, ऑप्टिमाइज़ेशन ब्राउज़र इसका इस्तेमाल करने लगे. मोबाइल पर 60 FPS (फ़्रेम प्रति सेकंड) का लक्ष्य हमेशा आपके साथ रहता है. इसलिए, ज़रूरी है कि आप उन ब्राउज़र से बाहर न जाएं जिन्हें बेहतर तरीके से दिखाने का तरीका पता है.

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

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

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

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

इस नई सुविधा का सबसे बड़ा फ़ायदा यह है कि इससे वीडियो में आने वाले अनचाहे उतार-चढ़ावों को खत्म किया जा सकता था. इस ऐनिमेशन का इस्तेमाल करते समय, इस ऐनिमेशन का इस्तेमाल बिना किसी झंझट वाले ऐनिमेशन के साथ किया जा सकता था.

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

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

इसलिए, हमने यह तरीका अपनाया:

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 और सीएसएस के ज़रिए बनाए गए ऐनिमेशन, दोनों में एक से ज़्यादा AnimationPlayers शामिल होंगे. इनकी मदद से, वे काम के और दिलचस्प तरीकों से, बिना किसी रुकावट के एक साथ इस्तेमाल किए जा सकते हैं.

हालांकि, अब तक 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() के नेटिव वर्शन और polyfill, दोनों का इस्तेमाल करके देख सकते हैं.

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

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

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

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

इस पोस्ट में मदद करने के लिए, एडी ओस्मानी और मैक्स हाय्नरिट्ज़ का धन्यवाद.