इस पेज का अनुवाद Cloud Translation API से किया गया है.

हुडीनी का ऐनिमेशन वर्कलेट

Surma

अपने वेब ऐप्लिकेशन के ऐनिमेशन को बेहतरीन बनाएं

बहुत ज़्यादा पढ़ा नहीं गया: ऐनिमेशन वर्कलेट से आपको ऐसे ज़रूरी ऐनिमेशन लिखने में मदद मिलती है जो डिवाइस के मूल फ़्रेम रेट पर चलते हैं. इससे आपको जैंक-फ़्री स्मूदनेसTM के लिए, डिवाइस के नेटिव फ़्रेम रेट पर काम करने में मदद मिलती है. आपके ऐनिमेशन, मुख्य थ्रेड जैंक के हिसाब से बेहतर बन जाते हैं और समय के बजाय स्क्रोल करने के लिए लिंक किए जा सकते हैं. ऐनिमेशन वर्कलेट, Chrome कैनरी में है ("प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं" फ़्लैग के पीछे) और हम Chrome 71 के लिए ऑरिजिन ट्रायल की योजना बना रहे हैं. इसे बेहतर बनाने की सुविधा के तौर पर, आज से ही इसका इस्तेमाल शुरू किया जा सकता है.

क्या कोई दूसरा ऐनिमेशन एपीआई है?

नहीं, यह हमारे पास पहले से मौजूद चीज़ों का ही एक एक्सटेंशन है, जो बिना किसी वजह के उपलब्ध है! चलिए, शुरुआत से करते हैं. अगर आपको आज वेब पर किसी भी डीओएम एलिमेंट को ऐनिमेट करना है, तो आपके पास दो 1⁄2 विकल्प हैं: A से B में आसानी से होने वाले ट्रांज़िशन के लिए सीएसएस ट्रांज़िशन, संभावित साइकल वाले, समय के हिसाब से जटिल ऐनिमेशन के लिए सीएसएस ऐनिमेशन, और बिना किसी क्रम के मुश्किल ऐनिमेशन के लिए वेब ऐनिमेशन एपीआई (WAAPI). WAAPI के सपोर्ट मैट्रिक्स को ठीक तरह से हल नहीं किया गया है, लेकिन यह काम जल्द ही होने वाला है. तब तक, एक polyfill मिलेगा.

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

और स्थितिहीनता के बारे में क्या? उदाहरण के लिए, Android पर Chrome के पता बार के बारे में सोचें. नीचे की ओर स्क्रोल करने पर, स्क्रीन से बाहर स्क्रोल हो जाएगा. लेकिन जैसे ही आप ऊपर की ओर स्क्रोल करते हैं, वह पेज वापस आता है, भले ही आप उस पेज से आधा नीचे हों. ऐनिमेशन, स्क्रोल की पोज़िशन पर ही नहीं, बल्कि स्क्रोल करने की पिछली दिशा पर भी निर्भर करता है. यह स्टेटस है.

एक और समस्या स्क्रोलबार को स्टाइल करने की है. वे काफ़ी स्टाइल के होते हैं या कम से कम, स्टाइल करने लायक नहीं होते. अगर मुझे अपने स्क्रोलबार के तौर पर नई बिल्ली चाहिए, तो क्या होगा? आप जो भी तकनीक चुनें, पसंद के मुताबिक स्क्रोलबार बनाना न तो कारगर होता है और न ही आसान.

मुद्दे यह है कि ये सभी चीज़ें थोड़ी अजीब और मुश्किल हैं. इन्हें असरदार तरीके से लागू करना नामुमकिन है. इनमें से ज़्यादातर इवेंट और/या requestAnimationFrame पर निर्भर करते हैं, जो आपको 60fps पर बनाए रख सकते हैं. भले ही आपकी स्क्रीन 90fps, 120fps या उससे ज़्यादा पर चल सकती हो और आपके कीमती थ्रेड फ़्रेम बजट के छोटे से छोटे हिस्से का इस्तेमाल कर रही हो.

ऐनिमेशन वर्कलेट इस तरह के इफ़ेक्ट को आसान बनाने के लिए वेब के ऐनिमेशन स्टैक की क्षमताओं को बढ़ाता है. आगे बढ़ने से पहले, आइए पक्का कर लें कि हमें ऐनिमेशन की बुनियादी जानकारी मिल गई है.

ऐनिमेशन और टाइमलाइन के बारे में शुरुआती जानकारी

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

हर दस्तावेज़ में document.timeline होता है. जब दस्तावेज़ बनाया जाता है, तो यह 0 से शुरू होता है. साथ ही, दस्तावेज़ के शुरू होने के बाद से मिलीसेकंड की गिनती करता है. दस्तावेज़ के सभी ऐनिमेशन इस टाइमलाइन के हिसाब से काम करते हैं.

डेटा को और बेहतर बनाने के लिए, आइए इस WAAPI स्निपेट पर एक नज़र डालें

const animation = new Animation(
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)',
      },
      {
        transform: 'translateX(500px)',
      },
      {
        transform: 'translateY(500px)',
      },
    ],
    {
      delay: 3000,
      duration: 2000,
      iterations: 3,
    }
  ),
  document.timeline
);

animation.play();

जब हम animation.play() को कॉल करते हैं, तो ऐनिमेशन शुरू होने के समय के तौर पर टाइमलाइन के currentTime का इस्तेमाल करता है. हमारे ऐनिमेशन में 3000 मि॰से॰ की देरी है. इसका मतलब है कि टाइमलाइन के `startTime पर पहुंचने पर, ऐनिमेशन शुरू हो जाएगा या "ऐक्टिव" हो जाएगा

3000. After that time, the animation engine will animate the given element from the first keyframe (TranslateX(0)), through all intermediate keyframes (translateX(500px)) all the way to the last keyframe (अनुवादY(500px)) in exactly 2000ms, as prescribed by theअवधिoptions. Since we have a duration of 2000ms, we will reach the middle keyframe when the timeline'scurrentTimeisstartTime + 3000 + 1000and the last keyframe atstartTime + 3000 + 2000`. अब बात यह है कि हम अपने ऐनिमेशन में टाइमलाइन को कंट्रोल करते हैं!

जब ऐनिमेशन आखिरी मुख्य-फ़्रेम पर पहुंच जाएगा, तो वह पहले मुख्य-फ़्रेम पर वापस चला जाएगा और ऐनिमेशन का अगला चरण शुरू करेगा. iterations: 3 को सेट करने के बाद से, इस प्रोसेस को कुल तीन बार दोहराया जाता है. अगर हम चाहते थे कि ऐनिमेशन कभी न रुके, तो हम iterations: Number.POSITIVE_INFINITY लिखेंगे. ऊपर दिए गए कोड का नतीजे यहां दिया गया है.

WAAPI बहुत ही दमदार है और इस एपीआई में कई और सुविधाएं हैं, जैसे कि ईज़िंग, स्टार्ट ऑफ़सेट, मुख्य-फ़्रेम वेटिंग, और फ़िल बिहेवियर जो इस लेख के दायरे में आना चाहिए. अगर आपको इस बारे में ज़्यादा जानना है, तो हमारा सुझाव है कि आप CSS Tricks पर सीएसएस ऐनिमेशन के बारे में यह लेख पढ़ें.

ऐनिमेशन वर्कलेट लिखना

अब हमने टाइमलाइन का कॉन्सेप्ट समझ लिया है. इसलिए, अब हम ऐनिमेशन वर्कलेट के बारे में जानना शुरू कर सकते हैं. इससे आपको पता चलेगा कि इसकी मदद से, टाइमलाइन में दी गई जानकारी को फिर से कैसे मैनेज किया जा सकता है! ऐनिमेशन Worklet API, सिर्फ़ WAAPI पर आधारित नहीं है, बल्कि एक्सटेंसिबल वेब के संदर्भ में है. यह एक लोअर-लेवल का प्रिमिटिव है, जो बताता है कि WAAPI कैसे काम करता है. सिंटैक्स के मामले में, वे काफ़ी हद तक एक जैसे हैं:

ऐनिमेशन वर्कलेट	डब्ल्यूएएपीआई
new WorkletAnimation( 'passthrough', new KeyframeEffect( document.querySelector('#a'), [ { transform: 'translateX(0)' }, { transform: 'translateX(500px)' } ], { duration: 2000, iterations: Number.POSITIVE_INFINITY } ), document.timeline ).play();	new Animation( new KeyframeEffect( document.querySelector('#a'), [ { transform: 'translateX(0)' }, { transform: 'translateX(500px)' } ], { duration: 2000, iterations: Number.POSITIVE_INFINITY } ), document.timeline ).play();

ऐनिमेशन वर्कलेट

डब्ल्यूएएपीआई

new WorkletAnimation(
  'passthrough',
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)'
      },
      {
        transform: 'translateX(500px)'
      }
    ],
    {
      duration: 2000,
      iterations: Number.POSITIVE_INFINITY
    }
  ),
  document.timeline
).play();

        new Animation(

        new KeyframeEffect(
        document.querySelector('#a'),
        [
        {
        transform: 'translateX(0)'
        },
        {
        transform: 'translateX(500px)'
        }
        ],
        {
        duration: 2000,
        iterations: Number.POSITIVE_INFINITY
        }
        ),
        document.timeline
        ).play();

अंतर पहले पैरामीटर में है, जो इस ऐनिमेशन को चलाने वाले वर्कलेट का नाम है.

सुविधा की पहचान करने की सुविधा

Chrome इस सुविधा को भेजने वाला पहला ब्राउज़र है. इसलिए, आपको यह पक्का करना होगा कि आपके कोड में, AnimationWorklet के मौजूद होने की उम्मीद न हो. इसलिए, वर्कलेट लोड करने से पहले, हमें आसानी से जांच करके यह पता लगाना चाहिए कि उपयोगकर्ता के ब्राउज़र पर AnimationWorklet काम करता है या नहीं:

if ('animationWorklet' in CSS) {
  // AnimationWorklet is supported!
}

वर्कलेट लोड हो रहा है

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

ऐनिमेशन का एलान करने से पहले, हमें यह पक्का करना होगा कि हमने "पासथ्रू" नाम वाला एक वर्कलेट लोड किया हो:

// index.html
await CSS.animationWorklet.addModule('passthrough-aw.js');
// ... WorkletAnimation initialization from above ...

// passthrough-aw.js
registerAnimator(
  'passthrough',
  class {
    animate(currentTime, effect) {
      effect.localTime = currentTime;
    }
  }
);

यहां क्या होता है? हम AnimationWorklet के registerAnimator() कॉल का इस्तेमाल करके किसी क्लास को ऐनिमेटर के तौर पर रजिस्टर कर रहे हैं और इसे "पासथ्रू" नाम दिया गया है. यह वही नाम है जिसे हमने ऊपर दिए गए WorkletAnimation() कंस्ट्रक्टर में इस्तेमाल किया है. रजिस्ट्रेशन पूरा होने के बाद, addModule() से जो प्रॉमिस मिलता है वह हल हो जाएगा. इसके बाद, हम उस वर्कलेट का इस्तेमाल करके ऐनिमेशन बनाना शुरू कर सकते हैं.

हमारे इंस्टेंस के animate() तरीके को उस हर फ़्रेम के लिए इस्तेमाल किया जाएगा जिसे ब्राउज़र रेंडर करना चाहता है. साथ ही, इसे ऐनिमेशन की टाइमलाइन के currentTime के साथ-साथ, अभी प्रोसेस हो रहे इफ़ेक्ट को पास किया जाएगा. हमारा सिर्फ़ एक इफ़ेक्ट है, KeyframeEffect और हम currentTime का इस्तेमाल, इफ़ेक्ट localTime को सेट करने के लिए कर रहे हैं. इसलिए, इस ऐनिमेटर को "पासथ्रू" कहा जाता है. वर्कलेट के लिए इस कोड के साथ, ऊपर दिया गया WAAPI और ऐनिमेशनवर्कलेट बिलकुल वैसा ही व्यवहार करता है जैसा कि डेमो में देखा जा सकता है.

समय

हमारे animate() तरीके का currentTime पैरामीटर, उस टाइमलाइन का currentTime है जिसे हमने WorkletAnimation() कंस्ट्रक्टर को पास किया है. पिछले उदाहरण में, हमने उस समय को असरदार तरीके से लागू किया है. हालांकि, यह JavaScript कोड है, इसलिए हम समय में गड़बड़ी कर सकते हैं 💫

function remap(minIn, maxIn, minOut, maxOut, v) {
  return ((v - minIn) / (maxIn - minIn)) * (maxOut - minOut) + minOut;
}
registerAnimator(
  'sin',
  class {
    animate(currentTime, effect) {
      effect.localTime = remap(
        -1,
        1,
        0,
        2000,
        Math.sin((currentTime * 2 * Math.PI) / 2000)
      );
    }
  }
);

ध्यान दें: currentTime कुछ मामलों में NaNहो सकता है (ज़्यादा बाद में). ऐनिमेशन वर्कलेट लिखते समय इस बात का ध्यान रखें. सभी गणितीय ऑपरेशन NaN को हैंडल कर सकते हैं (जब उनका इनपुट NaN होता है, तो वे NaN दिखाते हैं), इसलिए हमें यहां दिक्कत नहीं है!

हम currentTime के Math.sin() को लेकर, उस वैल्यू को [0; 2000] की रेंज पर फिर से मैप कर रहे हैं. यह वह समयसीमा है जिसके लिए हमारे इफ़ेक्ट को तय किया गया है. अब ऐनिमेशन बहुत अलग दिखता है, लेकिन मुख्य-फ़्रेम या ऐनिमेशन के विकल्पों में बदलाव किए बिना. वर्कलेट कोड काफ़ी मुश्किल हो सकता है. इससे आपको प्रोग्राम बनाकर यह तय करने की सुविधा मिलती है कि कौनसे इफ़ेक्ट किस क्रम में और किस हद तक चलाए जाएं.

विकल्पों से ज़्यादा विकल्प

किसी वर्कलेट को फिर से इस्तेमाल किया जा सकता है और उसके नंबर बदले जा सकते हैं. इस वजह से WorkletAnimation कंस्ट्रक्टर की मदद से, वर्कलेट में कोई विकल्प ऑब्जेक्ट पास किया जा सकता है:

registerAnimator(
  'factor',
  class {
    constructor(options = {}) {
      this.factor = options.factor || 1;
    }
    animate(currentTime, effect) {
      effect.localTime = currentTime * this.factor;
    }
  }
);

new WorkletAnimation(
  'factor',
  new KeyframeEffect(
    document.querySelector('#b'),
    [
      /* ... same keyframes as before ... */
    ],
    {
      duration: 2000,
      iterations: Number.POSITIVE_INFINITY,
    }
  ),
  document.timeline,
  {factor: 0.5}
).play();

ध्यान दें: विकल्प ऑब्जेक्ट को वर्कलेट पर भेजे जाने के दौरान, उसे स्ट्रक्चरल तौर पर क्लोन किया जाएगा. यह ठीक वैसे ही होगा जैसे postMessage() के काम करने के लिए किया जाता है.

इस उदाहरण में, दोनों ऐनिमेशन एक ही कोड से चलाए गए हैं, लेकिन उनके लिए अलग-अलग विकल्प हैं.

मुझे अपना स्थानीय राज्य दें!

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

registerAnimator(
  'randomspin',
  class {
    constructor(options = {}, state = {}) {
      this.direction = state.direction || (Math.random() > 0.5 ? 1 : -1);
    }
    animate(currentTime, effect) {
      // Some math to make sure that `localTime` is always > 0.
      effect.localTime = 2000 + this.direction * (currentTime % 2000);
    }
    destroy() {
      return {
        direction: this.direction,
      };
    }
  }
);

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

ध्यान दें: destroy() लाइफ़साइकल हुक को गैटर तरीके से बदल दिया गया है. हालांकि, इस बदलाव को अभी स्पेसिफ़िकेशन या Chrome के लागू करने के तरीके में नहीं दिखाया गया है.

स्पेस-टाइम कंटिन्युम के बारे में जानना: ScrollTimeline

जैसा कि पिछले सेक्शन में दिखाया गया है, ऐनिमेशनवर्कलेट हमें प्रोग्राम के हिसाब से यह तय करने की अनुमति देता है कि टाइमलाइन को बेहतर करने से, ऐनिमेशन के असर पर क्या असर पड़ता है. हालांकि, अब तक हमारी टाइमलाइन हमेशा document.timeline रही है, जिससे समय का पता चलता है.

ScrollTimeline से नई संभावनाएं मिलती हैं. इससे आपको समय के बजाय स्क्रोल करके ऐनिमेशन चलाने की सुविधा मिलती है. हम इस डेमो के लिए, अपने पहले "पासथ्रू" वर्कलेट का फिर से इस्तेमाल करने जा रहे हैं:

new WorkletAnimation(
  'passthrough',
  new KeyframeEffect(
    document.querySelector('#a'),
    [
      {
        transform: 'translateX(0)',
      },
      {
        transform: 'translateX(500px)',
      },
    ],
    {
      duration: 2000,
      fill: 'both',
    }
  ),
  new ScrollTimeline({
    scrollSource: document.querySelector('main'),
    orientation: 'vertical', // "horizontal" or "vertical".
    timeRange: 2000,
  })
).play();

document.timeline को पास करने के बजाय, हम नया ScrollTimeline बना रहे हैं. आपने शायद सही अनुमान लगाया है. ScrollTimeline समय की जानकारी नहीं देता, लेकिन वर्कलेट में currentTime सेट करने के लिए scrollSource के स्क्रोल करने की जगह का इस्तेमाल करता है. ऊपर (या बाईं ओर) तक स्क्रोल करने का मतलब है currentTime = 0. वहीं, नीचे (या दाईं ओर) तक स्क्रोल करने पर, currentTime को timeRange पर सेट हो जाता है. इस डेमो में बॉक्स को स्क्रोल करके, लाल बॉक्स की जगह को कंट्रोल किया जा सकता है.

ध्यान दें: ऐसा हो सकता है कि आप ScrollTimeline का इस्तेमाल सामान्य Animation के साथ कर पाएं. ऐसा दिख सकता है और हम सहमत हैं. यह प्लान बनाया गया है, लेकिन फ़िलहाल यह Chrome पर काम नहीं करता.

अगर ऐसे एलिमेंट के साथ ScrollTimeline बनाया जाता है जो स्क्रोल नहीं करता, तो टाइमलाइन का currentTime, NaN होगा. इसलिए, खास तौर पर रिस्पॉन्सिव डिज़ाइन को ध्यान में रखते हुए, आपको currentTime के तौर पर NaN के लिए हमेशा तैयार रहना चाहिए. आम तौर पर, इसकी वैल्यू को डिफ़ॉल्ट रूप से 0 पर सेट करना ठीक रहता है.

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

हुड के नीचे

वर्कलेट

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

कंपोज़िटर NSync

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

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

कलाई पर थप्पड़ मारें

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

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

नतीजा

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

ऐनिमेशन वर्कलेट, कैनरी में है और हम Chrome 71 को ऑरिजिन ट्रायल पर लाने की कोशिश कर रहे हैं. हम आपके नए वेब अनुभवों और इस बारे में सुनने का बेसब्री से इंतज़ार कर रहे हैं कि हम क्या बेहतर कर सकते हैं. इसके अलावा, एक polyfill भी होता है, जो आपको वही एपीआई देता है, लेकिन परफ़ॉर्मेंस को अलग नहीं करता.

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