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

Surma

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

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

क्या कोई और Animation API है?

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

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

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

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

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

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

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

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

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

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

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

फ़ीचर का पता लगाने की सुविधा

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

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

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

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

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

// 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() कॉल का इस्तेमाल करके, क्लास को ऐनिमेटर के तौर पर रजिस्टर कर रहे हैं. साथ ही, इसे "passthrough" नाम दे रहे हैं. यह वही नाम है जिसका इस्तेमाल हमने ऊपर WorkletAnimation() कंस्ट्रक्टर में किया था. रजिस्ट्रेशन पूरा होने के बाद, addModule() से मिला प्रॉमिस पूरा हो जाएगा. इसके बाद, हम उस वर्कलेट का इस्तेमाल करके ऐनिमेशन बनाना शुरू कर सकते हैं.

हमारे इंस्टेंस का animate() तरीका, ब्राउज़र के रेंडर किए जाने वाले हर फ़्रेम के लिए कॉल किया जाएगा. इसमें, ऐनिमेशन की टाइमलाइन का currentTime और साथ ही, वह इफ़ेक्ट पास किया जाएगा जिसे फ़िलहाल प्रोसेस किया जा रहा है. हमारे पास सिर्फ़ एक इफ़ेक्ट है, KeyframeEffect. हम currentTime का इस्तेमाल करके, इफ़ेक्ट का localTime सेट कर रहे हैं. इसलिए, इस ऐनिमेटर को "पासथ्रू" कहा जाता है. वर्कलेट के लिए इस कोड की मदद से, ऊपर दिए गए 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() कॉल होगा. इससे दिशा में अचानक बदलाव हो सकता है. ऐसा न हो, इसके लिए हम ऐनिमेशन को state के तौर पर, किसी भी दिशा में वापस ले जाते हैं. साथ ही, अगर कंस्ट्रक्टर दिया गया है, तो हम इसका इस्तेमाल करते हैं.

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

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

बारीकियों के बारे में जानें

वर्कलेट

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

Compositor NSync

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

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

मामूली सज़ा

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

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

नतीजा

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

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

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