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

Surma

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

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

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

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

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

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