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

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

आगे जाएं और Element.animate पर जाएं

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

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

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