হাউডিনির অ্যানিমেশন ওয়ার্কলেট

সুরমা

আপনার ওয়েবঅ্যাপের অ্যানিমেশনগুলিকে সুপারচার্জ করুন

TL;DR: অ্যানিমেশন ওয়ার্কলেট আপনাকে সেই অতিরিক্ত বাটারি জ্যাঙ্ক-মুক্ত মসৃণতার জন্য ডিভাইসের নেটিভ ফ্রেম হারে চালিত প্রয়োজনীয় অ্যানিমেশনগুলি লিখতে দেয়, আপনার অ্যানিমেশনগুলিকে প্রধান থ্রেড জ্যাঙ্কের বিরুদ্ধে আরও স্থিতিস্থাপক করে তোলে এবং সময়ের পরিবর্তে স্ক্রোল করার জন্য লিঙ্কযোগ্য। অ্যানিমেশন ওয়ার্কলেটটি ক্রোম ক্যানারিতে রয়েছে ("পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকার পিছনে) এবং আমরা Chrome 71-এর জন্য একটি অরিজিন ট্রায়ালের পরিকল্পনা করছি৷ আপনি এটিকে আজই একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করা শুরু করতে পারেন৷

আরেকটি অ্যানিমেশন API?

আসলে না, এটি আমাদের ইতিমধ্যে যা আছে তার একটি এক্সটেনশন এবং সঙ্গত কারণে! শুরুতেই শুরু করা যাক। আপনি যদি আজকে ওয়েবে কোনো DOM উপাদান অ্যানিমেট করতে চান, তাহলে আপনার কাছে 2 ½ পছন্দ রয়েছে: সাধারণ A থেকে B রূপান্তরের জন্য CSS ট্রানজিশন , সম্ভাব্য চক্রাকারের জন্য CSS অ্যানিমেশন , আরও জটিল সময়-ভিত্তিক অ্যানিমেশন এবং প্রায় নির্বিচারে ওয়েব অ্যানিমেশন API (WAAPI) জটিল অ্যানিমেশন। WAAPI-এর সাপোর্ট ম্যাট্রিক্স দেখতে বেশ ভয়ঙ্কর দেখাচ্ছে, কিন্তু এটি উঠার পথে। ততক্ষণ পর্যন্ত, একটি পলিফিল আছে।

এই সমস্ত পদ্ধতির মধ্যে যা মিল রয়েছে তা হল তারা রাষ্ট্রহীন এবং সময়-চালিত। কিন্তু কিছু প্রভাব বিকাশকারীরা চেষ্টা করছেন সময়-চালিত বা রাষ্ট্রহীন নয়। উদাহরণস্বরূপ, কুখ্যাত প্যারালাক্স স্ক্রলার, নাম থেকে বোঝা যায়, স্ক্রোল-চালিত। আজ ওয়েবে একটি পারফরম্যান্ট প্যারালাক্স স্ক্রলার প্রয়োগ করা আশ্চর্যজনকভাবে কঠিন।

এবং রাষ্ট্রহীনতা সম্পর্কে কি? উদাহরণস্বরূপ, Android এ Chrome এর ঠিকানা বার সম্পর্কে চিন্তা করুন। আপনি নীচে স্ক্রোল করলে, এটি দৃশ্যের বাইরে স্ক্রোল করে। কিন্তু দ্বিতীয় আপনি স্ক্রল আপ, এটি ফিরে আসে, এমনকি যদি আপনি অর্ধেক পথ নিচে যে পৃষ্ঠা. অ্যানিমেশন শুধুমাত্র স্ক্রোল অবস্থানের উপর নয়, আপনার পূর্ববর্তী স্ক্রোল দিকনির্দেশের উপরও নির্ভর করে। এটা রাষ্ট্রীয় ।

আরেকটি সমস্যা হল স্ক্রলবার স্টাইলিং। তারা কুখ্যাতভাবে অস্থির - বা অন্তত যথেষ্ট শৈলীযোগ্য নয়। যদি আমি আমার স্ক্রলবার হিসাবে একটি nyan বিড়াল চাই? আপনি যে কৌশলই বেছে নিন না কেন, একটি কাস্টম স্ক্রলবার তৈরি করা কার্যকরী নয়, সহজও নয়৷

মূল বিষয় হল এই সমস্ত জিনিসগুলি বিশ্রী এবং দক্ষতার সাথে বাস্তবায়ন করা অসম্ভব থেকে কঠিন। তাদের বেশিরভাগই ইভেন্ট এবং/অথবা 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 তার শুরুর সময় হিসাবে ব্যবহার করে। আমাদের অ্যানিমেশনে 3000ms দেরি হয়েছে, যার অর্থ হল টাইমলাইন `startTime' এ পৌঁছালে অ্যানিমেশন শুরু হবে (বা "সক্রিয়" হয়ে যাবে)

  • . 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 the সময়কাল বিকল্প ) in exactly 2000ms, as prescribed by the options. Since we have a duration of 2000ms, we will reach the middle keyframe when the timeline's বর্তমান is startTime + 3000 + 1000 and the last keyframe at । মোদ্দা কথা, টাইমলাইন নিয়ন্ত্রণ করে আমাদের অ্যানিমেশনে আমরা কোথায় আছি!

একবার অ্যানিমেশন শেষ কীফ্রেমে পৌঁছে গেলে, এটি প্রথম কীফ্রেমে ফিরে যাবে এবং অ্যানিমেশনের পরবর্তী পুনরাবৃত্তি শুরু করবে। আমরা iterations: 3 । যদি আমরা চাই যে অ্যানিমেশন কখনই বন্ধ না হোক, আমরা iterations: Number.POSITIVE_INFINITY । এখানে উপরের কোডের ফলাফল ।

WAAPI অবিশ্বাস্যভাবে শক্তিশালী এবং এই এপিআইতে আরও অনেক বৈশিষ্ট্য রয়েছে যেমন ইজিং, স্টার্ট অফসেট, কীফ্রেম ওয়েটিং এবং ফিল আচরণ যা এই নিবন্ধের সুযোগকে উড়িয়ে দেবে। আপনি যদি আরও জানতে চান, আমি সিএসএস ট্রিকসের উপর CSS অ্যানিমেশনের এই নিবন্ধটি পড়ার পরামর্শ দিই।

একটি অ্যানিমেশন ওয়ার্কলেট লেখা

এখন যেহেতু আমাদের কাছে টাইমলাইনের ধারণা রয়েছে, আমরা অ্যানিমেশন ওয়ার্কলেটের দিকে তাকানো শুরু করতে পারি এবং কীভাবে এটি আপনাকে টাইমলাইনের সাথে তালগোল পাকানোর অনুমতি দেয়! অ্যানিমেশন ওয়ার্কলেট এপিআই শুধুমাত্র WAAPI-এর উপর ভিত্তি করে নয়, তবে এটি — এক্সটেনসিবল ওয়েবের অর্থে — একটি নিম্ন-স্তরের আদিম যা ব্যাখ্যা করে যে কীভাবে 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!
}

একটি ওয়ার্কলেট লোড হচ্ছে

Worklets হল একটি নতুন ধারণা যা Houdini টাস্ক ফোর্স দ্বারা প্রবর্তিত হয়েছে যাতে অনেকগুলি নতুন API তৈরি করা এবং স্কেল করা সহজ হয়৷ আমরা আরও একটু পরে ওয়ার্কলেটের বিশদ বিবরণ কভার করব, তবে সরলতার জন্য আপনি এখন তাদের সস্তা এবং হালকা ওজনের থ্রেড (শ্রমিকদের মতো) হিসাবে ভাবতে পারেন।

অ্যানিমেশন ঘোষণা করার আগে আমাদের নিশ্চিত করতে হবে যে আমরা "পাসথ্রু" নামের একটি ওয়ার্কলেট লোড করেছি:

// 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 পরামিতি হল টাইমলাইনের currentTime যা আমরা WorkletAnimation() কনস্ট্রাক্টরকে দিয়েছি। পূর্ববর্তী উদাহরণে, আমরা সেই সময়টিকে প্রভাবের মাধ্যমে পাস করেছি। কিন্তু যেহেতু এটি জাভাস্ক্রিপ্ট কোড, এবং আমরা সময়কে বিকৃত করতে পারি 💫

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], যা আমাদের প্রভাব সংজ্ঞায়িত করা হয় যে সময় পরিসীমা. কীফ্রেম বা অ্যানিমেশনের বিকল্পগুলি পরিবর্তন না করেই এখন অ্যানিমেশনটি খুব আলাদা দেখাচ্ছে । ওয়ার্কলেট কোডটি নির্বিচারে জটিল হতে পারে, এবং আপনাকে প্রোগ্রাম্যাটিকভাবে সংজ্ঞায়িত করতে দেয় যে কোন প্রভাবগুলি কোন ক্রমে এবং কোন মাত্রায় চালানো হয়।

অপশন ওভার অপশন

আপনি একটি ওয়ার্কলেট পুনরায় ব্যবহার করতে এবং এর সংখ্যা পরিবর্তন করতে চাইতে পারেন। এই কারণে ওয়ার্কলেট অ্যানিমেশন কনস্ট্রাক্টর আপনাকে ওয়ার্কলেটে একটি বিকল্প অবজেক্ট পাস করার অনুমতি দেয়:

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() কল আসবে, যা হঠাৎ দিক পরিবর্তনের কারণ হতে পারে। এটি যাতে না ঘটে তা নিশ্চিত করার জন্য, আমরা অ্যানিমেশনগুলিকে এলোমেলোভাবে নির্বাচিত দিকটিকে স্টেট হিসাবে ফিরিয়ে দিই এবং প্রদান করা হলে কনস্ট্রাক্টরে ব্যবহার করি৷

স্থান-কালের ধারাবাহিকতায় হুকিং: স্ক্রলটাইমলাইন

পূর্ববর্তী বিভাগে দেখানো হয়েছে, 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 সময় ব্যবহার করে না কিন্তু scrollSource স্ক্রোল অবস্থান ওয়ার্কলেটে currentTime সেট করতে। উপরের দিকে (বা বাম দিকে) স্ক্রোল করার অর্থ হল currentTime = 0 , যখন নীচে (বা ডানদিকে) সমস্ত পথ স্ক্রোল করা হলে তা currentTime থেকে timeRange সেট করে। আপনি যদি এই ডেমোতে বাক্সটি স্ক্রোল করেন, আপনি লাল বাক্সের অবস্থান নিয়ন্ত্রণ করতে পারেন।

আপনি যদি এমন একটি উপাদান দিয়ে একটি ScrollTimeline তৈরি করেন যা স্ক্রোল করে না, টাইমলাইনের currentTime হবে NaN । তাই বিশেষ করে প্রতিক্রিয়াশীল ডিজাইনের কথা মাথায় রেখে, আপনার currentTime হিসাবে NaN জন্য সর্বদা প্রস্তুত থাকা উচিত। এটি প্রায়শই 0 এর মান ডিফল্ট করার জন্য বুদ্ধিমান।

স্ক্রোল পজিশনের সাথে অ্যানিমেশনগুলিকে লিঙ্ক করা এমন কিছু যা দীর্ঘদিন ধরে চাওয়া হয়েছে, কিন্তু সত্যই বিশ্বস্ততার এই স্তরে (CSS3D এর সাথে হ্যাকি ওয়ার্কঅ্যারাউন্ডগুলি ছাড়া) কখনই অর্জন করা যায়নি। অ্যানিমেশন ওয়ার্কলেট এই প্রভাবগুলিকে অত্যন্ত কার্যকরী হওয়ার সময় একটি সরল উপায়ে প্রয়োগ করার অনুমতি দেয়। উদাহরণস্বরূপ: এই ডেমোর মতো একটি প্যারালাক্স স্ক্রলিং প্রভাব দেখায় যে স্ক্রোল-চালিত অ্যানিমেশনকে সংজ্ঞায়িত করতে এখন মাত্র কয়েকটি লাইন লাগে।

ফণা অধীনে

ওয়ার্কলেটস

ওয়ার্কলেটগুলি হল একটি বিচ্ছিন্ন সুযোগ এবং একটি খুব ছোট API পৃষ্ঠ সহ জাভাস্ক্রিপ্ট প্রসঙ্গ। ছোট এপিআই সারফেস ব্রাউজার থেকে বিশেষ করে লো-এন্ড ডিভাইসে আরও আক্রমনাত্মক অপ্টিমাইজেশনের অনুমতি দেয়। অতিরিক্তভাবে, ওয়ার্কলেটগুলি একটি নির্দিষ্ট ইভেন্ট লুপের সাথে আবদ্ধ নয়, তবে প্রয়োজন অনুসারে থ্রেডগুলির মধ্যে সরানো যেতে পারে। এটি অ্যানিমেশন ওয়ার্কলেটের জন্য বিশেষভাবে গুরুত্বপূর্ণ।

কম্পোজিটর NSync

আপনি হয়তো জানেন যে কিছু CSS বৈশিষ্ট্য দ্রুত অ্যানিমেট করতে পারে, অন্যরা তা নয়। কিছু বৈশিষ্ট্যের জন্য জিপিইউতে অ্যানিমেটেড করার জন্য কিছু কাজ করা দরকার, অন্যরা ব্রাউজারকে পুরো নথিটি পুনরায় লেআউট করতে বাধ্য করে।

ক্রোমে (অন্যান্য অনেক ব্রাউজারে যেমন) আমাদের কাছে কম্পোজিটর নামে একটি প্রক্রিয়া রয়েছে, যার কাজ হল — এবং আমি এখানে খুব সরলীকরণ করছি — স্তর এবং টেক্সচারগুলি সাজানো এবং তারপরে যতটা সম্ভব নিয়মিতভাবে স্ক্রীন আপডেট করার জন্য GPU ব্যবহার করা, আদর্শভাবে যত দ্রুত স্ক্রিন আপডেট করা যায় (সাধারণত 60Hz)। কোন সিএসএস বৈশিষ্ট্যগুলি অ্যানিমেটেড করা হচ্ছে তার উপর নির্ভর করে, ব্রাউজারটির কেবলমাত্র কম্পোজিটরকে এটির কাজ করার প্রয়োজন হতে পারে, যখন অন্যান্য বৈশিষ্ট্যগুলির জন্য লেআউট চালানো প্রয়োজন, যা একটি অপারেশন যা শুধুমাত্র প্রধান থ্রেড করতে পারে। আপনি কোন বৈশিষ্ট্যগুলিকে অ্যানিমেট করার পরিকল্পনা করছেন তার উপর নির্ভর করে, আপনার অ্যানিমেশন ওয়ার্কলেট হয় প্রধান থ্রেডের সাথে আবদ্ধ হবে বা কম্পোজিটরের সাথে সিঙ্ক করে একটি পৃথক থ্রেডে চলবে৷

কব্জিতে থাপ্পড়

সাধারণত শুধুমাত্র একটি কম্পোজিটর প্রক্রিয়া থাকে যা সম্ভাব্য একাধিক ট্যাব জুড়ে শেয়ার করা হয়, কারণ GPU একটি উচ্চ-বিরোধিত সংস্থান। যদি কম্পোজিটর কোনোভাবে ব্লক হয়ে যায়, পুরো ব্রাউজারটি বন্ধ হয়ে যায় এবং ব্যবহারকারীর ইনপুটের প্রতি প্রতিক্রিয়াহীন হয়ে পড়ে। এটি যে কোনও মূল্যে এড়ানো দরকার। তাহলে কি হবে যদি আপনার ওয়ার্কলেট ফ্রেম রেন্ডার করার জন্য কম্পোজিটরের প্রয়োজনীয় ডেটা সরবরাহ করতে না পারে?

যদি এটি ঘটে তাহলে ওয়ার্কলেটকে — স্লিপ করার জন্য — স্পেক অনুযায়ী — অনুমতি দেওয়া হয়। এটি কম্পোজিটরের পিছনে পড়ে, এবং কম্পোজিটরকে ফ্রেমের হার ঠিক রাখতে শেষ ফ্রেমের ডেটা পুনরায় ব্যবহার করার অনুমতি দেওয়া হয়। দৃশ্যত, এটি জ্যাঙ্কের মতো দেখাবে, তবে বড় পার্থক্য হল যে ব্রাউজারটি এখনও ব্যবহারকারীর ইনপুটের জন্য প্রতিক্রিয়াশীল।

উপসংহার

অ্যানিমেশন ওয়ার্কলেটের অনেক দিক রয়েছে এবং এটি ওয়েবে যে সুবিধাগুলি নিয়ে আসে। সুস্পষ্ট সুবিধাগুলি হল অ্যানিমেশনগুলির উপর আরও নিয়ন্ত্রণ এবং ওয়েবে একটি নতুন স্তরের ভিজ্যুয়াল বিশ্বস্ততা আনতে অ্যানিমেশনগুলি চালানোর নতুন উপায়৷ কিন্তু এপিআই ডিজাইন আপনাকে একই সময়ে সমস্ত নতুন কল্যাণে অ্যাক্সেস পাওয়ার সময় আপনার অ্যাপটিকে জ্যাঙ্ক করার জন্য আরও স্থিতিস্থাপক করে তুলতে দেয়।

অ্যানিমেশন ওয়ার্কলেট ক্যানারিতে রয়েছে এবং আমরা Chrome 71 এর সাথে একটি অরিজিন ট্রায়ালের লক্ষ্যে আছি। আমরা আপনার দুর্দান্ত নতুন ওয়েব অভিজ্ঞতার জন্য অধীর আগ্রহে অপেক্ষা করছি এবং আমরা কী উন্নতি করতে পারি সে সম্পর্কে শুনছি। একটি পলিফিলও রয়েছে যা আপনাকে একই API দেয়, কিন্তু কর্মক্ষমতা বিচ্ছিন্নতা প্রদান করে না।

মনে রাখবেন যে CSS ট্রানজিশন এবং CSS অ্যানিমেশনগুলি এখনও বৈধ বিকল্প এবং মৌলিক অ্যানিমেশনগুলির জন্য অনেক সহজ হতে পারে। কিন্তু যদি আপনি অভিনব যেতে চান, AnimationWorklet আপনার পিছনে আছে!