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

Sam Thorogood

इस साल की शुरुआत में, वेब ऐनिमेशन स्पेसिफ़िकेशन के तहत, Chrome 36 में element.animate मेथड लॉन्च किया गया था. इससे, बेहतर और नेटिव ऐनिमेशन लिखे जा सकते हैं. साथ ही, डेवलपर को अपने ऐनिमेशन और ट्रांज़िशन को सबसे सही तरीके से बनाने का विकल्प मिलता है.

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

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 पूरा होने के बाद, वह और उसके असर हट जाएंगे. हालांकि, इसका आखिरी समय, प्लेयर के currentTime से मेल खाएगा, ताकि आपका यूज़र इंटरफ़ेस (यूआई) एक जैसा रहे.

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

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

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

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

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