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

Surma

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

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

क्या कोई दूसरा Animation API है?

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

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

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

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

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

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

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

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 (translateY(500px)) in exactly 2000ms, as prescribed by thedurationoptions. 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 पर सीएसएस ऐनिमेशन के बारे में यह लेख पढ़ें.

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

अब हम टाइमलाइन के बारे में जान चुके हैं. अब हम ऐनिमेशन वर्कलेट के बारे में जानेंगे और यह भी जानेंगे कि टाइमलाइन में बदलाव करने के लिए, इसका इस्तेमाल कैसे किया जा सकता है! ऐनिमेशन वर्कलेट एपीआई, सिर्फ़ 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();
        

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

फ़ीचर का पता लगाना

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

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

वर्कलेट लोड करना

वर्कलेट, Houdini टास्क फ़ोर्स का एक नया कॉन्सेप्ट है. इससे कई नए एपीआई को आसानी से बनाया और स्केल किया जा सकता है. हम बाद में वर्कलेट के बारे में ज़्यादा जानकारी देंगे. हालांकि, फ़िलहाल उन्हें आसानी से समझने के लिए, वर्कर की तरह सस्ते और हल्के थ्रेड के तौर पर देखें.

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

// 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 और हम इफ़ेक्ट के localTime को सेट करने के लिए currentTime का इस्तेमाल कर रहे हैं. इसलिए, इस ऐनिमेशन को "पासथ्रू" कहा जाता है. वर्कलेट के लिए इस कोड का इस्तेमाल करने पर, ऊपर दिए गए WAAPI और AnimationWorklet एक जैसे काम करते हैं. इसकी जानकारी डेमो में दी गई है.

समय

हमारे animate() तरीके का currentTime पैरामीटर, WorkletAnimation() कन्स्ट्रक्टर को पास की गई टाइमलाइन का currentTime है. पिछले उदाहरण में, हमने सिर्फ़ उस समय को इफ़ेक्ट में पास किया था. हालांकि, यह एक 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 का 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();

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

मुझे अपने देश/इलाके का नाम बताओ!

जैसा कि मैंने पहले बताया था, ऐनिमेशन वर्कलेट की मदद से, स्टेटफ़ुल ऐनिमेशन की समस्या को हल किया जा सकता है. ऐनिमेशन वर्कलेट में स्टेटस सेव करने की अनुमति होती है. हालांकि, वर्कलेट की एक मुख्य सुविधा यह है कि इन्हें किसी दूसरी थ्रेड पर माइग्रेट किया जा सकता है. इसके अलावा, संसाधनों को बचाने के लिए इन्हें मिटाया भी जा सकता है. इससे उनकी स्थिति भी मिट जाएगी. स्टेटस के खोने से बचने के लिए, ऐनिमेशन वर्कलेट एक हुक उपलब्ध कराता है. इसे वर्कलेट के बंद होने से पहले कहा जाता है. इसका इस्तेमाल, स्टेटस ऑब्जेक्ट को वापस लाने के लिए किया जा सकता है. जब वर्कलेट फिर से बनाया जाएगा, तो वह ऑब्जेक्ट कन्स्ट्रक्टर को पास कर दिया जाएगा. शुरुआत में बनाने पर, वह पैरामीटर 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() कॉल होगा. इसकी वजह से, अचानक दिशा बदल सकती है. ऐसा न हो, इसके लिए हम ऐनिमेशन के लिए, स्टेटस के तौर पर, रैंडम तरीके से चुने गए डायरेक्शन को दिखाते हैं. साथ ही, अगर कॉन्स्ट्रक्टर में यह जानकारी दी गई है, तो उसका इस्तेमाल करते हैं.

स्पेस-टाइम कॉन्टिन्यम में शामिल करना: ScrollTimeline

पिछले सेक्शन में बताया गया है कि AnimationWorklet की मदद से, प्रोग्राम के हिसाब से यह तय किया जा सकता है कि टाइमलाइन को आगे बढ़ाने से ऐनिमेशन के इफ़ेक्ट पर क्या असर पड़ता है. हालांकि, अब तक हमारी टाइमलाइन हमेशा 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 बनाया जाता है, तो टाइमलाइन का currentTime NaN होगा. इसलिए, रिस्पॉन्सिव डिज़ाइन को ध्यान में रखते हुए, आपको हमेशा currentTime के तौर पर NaN के लिए तैयार रहना चाहिए. अक्सर, डिफ़ॉल्ट रूप से वैल्यू को 0 पर सेट करना बेहतर होता है.

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

ज़्यादा जानकारी

वर्कलेट

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

कंपोज़िटर NSync

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

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

कलाई पर थप्पड़

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

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

नतीजा

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

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

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