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 में भी उपलब्ध हैं.