Chrome 39 में वेब ऐनिमेशन के प्लेबैक कंट्रोल

इस साल की शुरुआत में, Chrome 36 ने बड़े पैमाने पर वेब ऐनिमेशन स्पेसिफ़िकेशन के हिस्से के तौर पर, Element.ऐनिमेट के तरीके का इस्तेमाल किया. इससे, असरदार और नेटिव ऐनिमेशन बनाने में मदद मिलती है. साथ ही, डेवलपर को उनके हिसाब से सबसे सही तरीके के साथ ऐनिमेशन बनाने और ट्रांज़िशन बनाने का विकल्प मिलता है.

जानकारी को फिर से देखने के लिए, यहां बताया गया है कि हो जाने के बाद कॉलबैक के साथ, पूरी स्क्रीन पर क्लाउड को ऐनिमेट कैसे करें:

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

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

वीडियो चलाने की इन सुविधाओं से, वेब ऐनिमेशन के काम करने के तरीके की जानकारी मिलती है - ऐनिमेशन को ट्रांज़िशन के बारे में निर्देश देने के बजाय, अलग-अलग कामों के लिए इस्तेमाल किए जाने वाले टूल में बदलना, जैसे कि 'तय' या पहले से तय किए गए ऐनिमेशन.

वीडियो चलाने की रफ़्तार रोकें, पीछे ले जाएं या उसमें बदलाव करें

आइए, ऊपर दिए गए उदाहरण को अपडेट करके क्लाउड को क्लिक किए जाने पर ऐनिमेशन को रोकने के लिए शुरुआत करते हैं:

cloud.addEventListener('mousedown', function() {
    player.pause();
});

आपके पास playbackRate प्रॉपर्टी में बदलाव करने का भी विकल्प है:

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

आपके पास reverse() तरीके को कॉल करने का विकल्प भी है. आम तौर पर, यह तरीके मौजूदा playbackRate को -1 से गुणा करने पर, उलटा करने के बराबर होता है. हालांकि, यहां कुछ खास मामले दिए गए हैं:

• अगर reverse() तरीके से किए गए बदलाव से, चल रहा ऐनिमेशन सही तरीके से खत्म हो जाता है, तो currentTime भी उलटा हो जाता है. जैसे, अगर नया ऐनिमेशन उलट दिया जाता है, तो पूरा ऐनिमेशन पीछे की ओर चलेगा

• अगर प्लेयर रुका हुआ है, तो ऐनिमेशन चलने लगेगा.

प्लेयर को स्क्रब करना

ऐनिमेशन के चलने के दौरान, अब AnimationPlayer अपने currentTime में बदलाव करने की अनुमति देता है. आम तौर पर, यह वैल्यू समय के साथ बढ़ेगी या playbackRate के नेगेटिव होने पर घट जाएगी. इसकी वजह से शायद उपयोगकर्ता के इंटरैक्शन से, एनिमेशन की स्थिति को बाहरी तौर पर कंट्रोल किया जा सके. आम तौर पर, इसे स्क्रबिंग कहा जाता है.

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

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

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

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

इसे पेज को दूसरी जगह ले जाने के साथ-साथ लागू भी किया जा सकता है. यह इस बात पर निर्भर करता है कि पेज से माउस कहां से लिया गया है (मिला-जुला डेमो).

किसी उपयोगकर्ता के इंटरैक्शन पर, AnimationPlayer को स्क्रब करने के बजाय, इसके currentTime का इस्तेमाल प्रोग्रेस या स्टेटस दिखाने के लिए भी किया जा सकता है. जैसे, डाउनलोड की स्थिति दिखाने के लिए.

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

यूज़र इंटरफ़ेस (यूआई) ट्रांज़िशन और हाथ के जेस्चर

मोबाइल प्लैटफ़ॉर्म, हाथ के जेस्चर का इस्तेमाल लंबे समय से करते आ रहे हैं: खींचने, स्लाइड करने, फ़्लिंग करने, और ऐसे ही दूसरे काम करने के लिए. इन जेस्चर की एक ही थीम होती है: खींचने लायक यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट, जैसे कि सूची की तरह देखने के लिए "रीफ़्रेश करने के लिए खींचें" या स्क्रीन के बाईं ओर से एक साइडबार बनाया जा रहा है.

वेब ऐनिमेशन में, इसी तरह के असर को डेस्कटॉप या मोबाइल पर आसानी से दोबारा लागू किया जा सकता है. उदाहरण के लिए, जब हाथ के जेस्चर से currentTime को कंट्रोल किया जा रहा है, तो:

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

इससे एक अतिरिक्त ऐनिमेशन बन जाता है, जो 'ड्रिफ़्ट' करता है. यह हाथ के जेस्चर के पूरा होने के दौरान, हमारे जाने-पहचाने टारगेट तक जाता है.

यह ऐनिमेशन की तरह काम करता है, जिसकी प्राथमिकता उनके बनाने के क्रम के आधार पर तय होती है: इस मामले में, driftPlayer को प्लेयर से ज़्यादा प्राथमिकता दी जाएगी. driftPlayer पूरा हो जाने पर, यह और इसके असर हट जाएंगे. हालांकि, इसका फ़ाइनल समय प्लेयर के मौजूदा समय से मेल खाएगा, इसलिए आपका यूज़र इंटरफ़ेस (यूआई) एक जैसा ही रहेगा.

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

आगे बढ़ें और drive.animate

element.animate तरीका बिलकुल अभी शानदार है - चाहे आप इसे आसान ऐनिमेशन के लिए इस्तेमाल कर रहे हों या इसके दिए गए AnimationPlayer का फ़ायदा दूसरे तरीकों से ले रहे हों.

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

वेब ऐनिमेशन की खास जानकारी भी बेहतर होती रहेगी. अगर आपको आने वाली सुविधाओं को इस्तेमाल करना है, तो ये ज़्यादा जानकारी वाले पॉलीफ़िल: web-animations-next में उपलब्ध होंगी.