Chromium 84-এ ওয়েব অ্যানিমেশন API উন্নতি

প্রতিশ্রুতি সহ অ্যানিমেশন অর্কেস্ট্রেটিং, প্রতিস্থাপনযোগ্য অ্যানিমেশনগুলির সাথে পারফরম্যান্সের উন্নতি, যৌগিক মোড সহ মসৃণ অ্যানিমেশন এবং আরও অনেক কিছু।

Kevin Ellis

Una Kravets

সঠিকভাবে ব্যবহার করা হলে, অ্যানিমেশনগুলি আপনার ব্র্যান্ডের ব্যবহারকারীর উপলব্ধি এবং মেমরির উন্নতি করে , ব্যবহারকারীর ক্রিয়াকলাপকে গাইড করে এবং ব্যবহারকারীদের আপনার অ্যাপ্লিকেশন নেভিগেট করতে সাহায্য করে—একটি ডিজিটাল স্পেসে প্রসঙ্গ প্রদান করে।

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

যদিও ফায়ারফক্স এবং সাফারি ইতিমধ্যেই নির্দিষ্ট বৈশিষ্ট্যগুলির সম্পূর্ণ সেট প্রয়োগ করেছে, Chromium 84 Chrome এবং Edge- এ ক্রস-ব্রাউজার ইন্টারঅপারেবিলিটি সক্ষম করে পূর্বে অসমর্থিত বেশ কয়েকটি বৈশিষ্ট্য নিয়ে এসেছে।

Chromium-এ ওয়েব অ্যানিমেশন API-এর দীর্ঘ ইতিহাস।

শুরু হচ্ছে

ওয়েব অ্যানিমেশন API এর মাধ্যমে একটি অ্যানিমেশন তৈরি করা খুব পরিচিত বোধ করা উচিত যদি আপনি @keyframe নিয়মগুলি ব্যবহার করেন। প্রথমে আপনাকে একটি কীফ্রেম অবজেক্ট তৈরি করতে হবে। CSS-এ এইরকম দেখতে কি হতে পারে:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

জাভাস্ক্রিপ্টে এইরকম দেখতে হবে:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

যেখানে আপনি CSS এ অ্যানিমেশনের জন্য প্যারামিটার সেট করেন:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

আপনি JS এ সেট করবেন:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

কোডের পরিমাণ প্রায় একই, তবে জাভাস্ক্রিপ্টের সাথে, আপনি কয়েকটি সুপার পাওয়ার পাবেন যা আপনার একা CSS এর সাথে নেই। এর মধ্যে প্রভাব ক্রম করার ক্ষমতা এবং তাদের খেলার অবস্থার বর্ধিত নিয়ন্ত্রণ অন্তর্ভুক্ত রয়েছে।

দ্রষ্টব্য: কীফ্রেমে ব্যবহার করা হলে হাইফেনযুক্ত সম্পত্তির নাম উটের ক্ষেত্রে পরিণত হয় (যেমন background-color থেকে backgroundColor কালার)

element.animate() এর বাইরে

যাইহোক, আপডেটের সাথে, ওয়েব অ্যানিমেশন API element.animate() এর মাধ্যমে তৈরি অ্যানিমেশনগুলিতে সীমাবদ্ধ থাকবে না। আমরা সিএসএস অ্যানিমেশন এবং ট্রানজিশনও ম্যানিপুলেট করতে পারি।

getAnimations() হল এমন একটি পদ্ধতি যা একটি উপাদানের সমস্ত অ্যানিমেশন ফেরত দেয় তা নির্বিশেষে এটি element.animate() বা CSS নিয়ম (CSS অ্যানিমেশন বা ট্রানজিশন) এর মাধ্যমে তৈরি করা হয়েছিল। এটি দেখতে কেমন তার একটি উদাহরণ এখানে দেওয়া হল:

আমরা কোথা থেকে স্থানান্তর করছি তা নির্ধারণ করতে আপনি প্রথমে রূপান্তরের জন্য কীফ্রেমগুলি "get" ৷ তারপর, আপনি ক্রস ফেইড প্রভাব সক্ষম করে দুটি নতুন অপাসিটি অ্যানিমেশন তৈরি করুন। ক্রস-ফেড সম্পূর্ণ হলে, আপনি অনুলিপি মুছে ফেলুন।

প্রতিশ্রুতি সঙ্গে অ্যানিমেশন অর্কেস্ট্রেটিং

Chromium 84-এ, আপনার কাছে এখন দুটি পদ্ধতি রয়েছে যা প্রতিশ্রুতি দিয়ে ব্যবহার করা যেতে পারে: animation.ready এবং animation.finished ।

• animation.ready আপনাকে মুলতুবি পরিবর্তনগুলি কার্যকর হওয়ার জন্য অপেক্ষা করতে সক্ষম করে (যেমন প্লেব্যাক নিয়ন্ত্রণ পদ্ধতি যেমন প্লে এবং পজগুলির মধ্যে স্যুইচ করা)।
• animation.finished একটি অ্যানিমেশন সম্পূর্ণ হলে কাস্টম জাভাস্ক্রিপ্ট কোড কার্যকর করার একটি উপায় প্রদান করে।

আসুন আমাদের উদাহরণটি চালিয়ে যাওয়া যাক, এবং animation.finished এর সাথে একটি অর্কেস্ট্রেটেড অ্যানিমেশন চেইন তৈরি করুন। এখানে, আপনার কাছে একটি উল্লম্ব রূপান্তর ( scaleY ), একটি অনুভূমিক রূপান্তর ( scaleX ) অনুসরণ করে, একটি শিশু উপাদানে একটি অস্বচ্ছতা পরিবর্তন অনুসরণ করে:

একটি খোলার মডেল উপাদানে রূপান্তর এবং অস্বচ্ছতা প্রয়োগ করা। কোডপেনে ডেমো দেখুন

const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

আমরা চেইনে পরবর্তী অ্যানিমেশন সেট চালানোর আগে animation.finished.then() ব্যবহার করে এই অ্যানিমেশনগুলো চেইন করেছি। এইভাবে, অ্যানিমেশনগুলি ক্রমানুসারে প্রদর্শিত হয়, এবং আপনি বিভিন্ন টার্গেট উপাদানগুলিতে বিভিন্ন বিকল্প সেট (যেমন গতি এবং সহজ) সহ প্রভাব প্রয়োগ করছেন।

CSS-এর মধ্যে, এটি পুনরায় তৈরি করা কষ্টকর হবে, বিশেষ করে যখন একাধিক উপাদানে অনন্য, তবুও অনুক্রমযুক্ত অ্যানিমেশন প্রয়োগ করা হয়। আপনাকে একটি @keyframe ব্যবহার করতে হবে, অ্যানিমেশনগুলি স্থাপন করার জন্য সঠিক সময়ের শতাংশগুলি বাছাই করতে হবে, এবং ক্রমানুসারে অ্যানিমেশনগুলি ট্রিগার করার আগে animation-delay ব্যবহার করতে হবে৷

উদাহরণ: প্লে, পজ এবং রিভার্স

কি খুলতে পারে, বন্ধ করা উচিত! সৌভাগ্যবশত, Chromium 39 থেকে, ওয়েব অ্যানিমেশন API আমাদের অ্যানিমেশনগুলি চালানো, বিরতি এবং বিপরীত করার ক্ষমতা প্রদান করেছে৷

আপনি উপরের অ্যানিমেশনটি নিতে পারেন এবং .reverse() ব্যবহার করে বোতামে ক্লিক করার সময় এটিকে একটি মসৃণ, বিপরীত অ্যানিমেশন দিতে পারেন। এইভাবে, আপনি আমাদের মডেলের জন্য একটি মসৃণ এবং আরও প্রাসঙ্গিক মিথস্ক্রিয়া তৈরি করতে পারেন।

বোতামে ক্লিক করার পর একটি মডেল খোলার এবং বন্ধ হওয়ার উদাহরণ। গ্লিচের ডেমো দেখুন

আপনি যা করতে পারেন তা হল দুটি প্লে-পেন্ডিং অ্যানিমেশন তৈরি করুন ( openModal , এবং একটি ইনলাইন অপাসিটি ট্রান্সফরমেশন), এবং তারপর একটি অ্যানিমেশনকে বিরাম দিন, অন্যটি শেষ না হওয়া পর্যন্ত এটি বিলম্বিত করুন৷ তারপরে আপনি খেলার আগে প্রতিটি শেষ হওয়ার জন্য অপেক্ষা করার প্রতিশ্রুতি ব্যবহার করতে পারেন। অবশেষে, আপনি একটি পতাকা সেট করা আছে কিনা তা পরীক্ষা করতে পারেন, এবং তারপর প্রতিটি অ্যানিমেশন বিপরীত করুন।

উদাহরণ: আংশিক কীফ্রেমের সাথে গতিশীল মিথস্ক্রিয়া

রিটার্গেটিং উদাহরণ, যেখানে একটি মাউস ক্লিক অ্যানিমেশনকে একটি নতুন অবস্থানে সামঞ্জস্য করে। গ্লিচের ডেমো দেখুন

selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

এই উদাহরণে, শুধুমাত্র একটি কীফ্রেম আছে, এবং কোন নির্দিষ্ট স্টার্ট পজিশন নেই। এটি আংশিক কীফ্রেম ব্যবহার করার একটি উদাহরণ। মাউস হ্যান্ডলার এখানে কয়েকটি জিনিস করে: এটি একটি নতুন শেষ অবস্থান সেট করে এবং একটি নতুন অ্যানিমেশন ট্রিগার করে। নতুন শুরুর অবস্থান বর্তমান অন্তর্নিহিত অবস্থান থেকে অনুমান করা হয়।

বিদ্যমানগুলি এখনও চলমান অবস্থায় নতুন পরিবর্তনগুলি ট্রিগার করা যেতে পারে৷ এর মানে হল যে বর্তমান পরিবর্তন বাধাগ্রস্ত হয়েছে, এবং একটি নতুন তৈরি করা হয়েছে।

প্রতিস্থাপনযোগ্য অ্যানিমেশন সহ কর্মক্ষমতা উন্নতি

ইভেন্টের উপর ভিত্তি করে অ্যানিমেশন তৈরি করার সময়, যেমন 'mousemove' এ, প্রতিবার একটি নতুন অ্যানিমেশন তৈরি করা হয়, যা দ্রুত মেমরি গ্রাস করতে পারে এবং কর্মক্ষমতা হ্রাস করতে পারে। এই সমস্যার সমাধান করার জন্য, Chromium 83-এ প্রতিস্থাপনযোগ্য অ্যানিমেশন চালু করা হয়েছিল, স্বয়ংক্রিয় ক্লিনআপ সক্ষম করে, যেখানে সমাপ্ত অ্যানিমেশনগুলি প্রতিস্থাপনযোগ্য হিসাবে পতাকাঙ্কিত হয় এবং অন্য একটি সমাপ্ত অ্যানিমেশন দ্বারা প্রতিস্থাপিত হলে স্বয়ংক্রিয়ভাবে সরানো হয়। নিম্নলিখিত উদাহরণ বিবেচনা করুন:

একটি ধূমকেতুর ট্রেইল অ্যানিমেট করে যখন মাউস চলে যায়। গ্লিচের ডেমো দেখুন

elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

প্রতিবার মাউস নড়ে, ব্রাউজার ধূমকেতুর পথের প্রতিটি বলের অবস্থান পুনরায় গণনা করে এবং এই নতুন পয়েন্টে একটি অ্যানিমেশন তৈরি করে। ব্রাউজার এখন পুরানো অ্যানিমেশনগুলি সরিয়ে ফেলতে জানে (প্রতিস্থাপন সক্ষম করে) যখন:

1. অ্যানিমেশন শেষ।
2. এক বা একাধিক অ্যানিমেশন রয়েছে কম্পোজিট অর্ডারিংয়ে যা শেষ হয়েছে।
3. নতুন অ্যানিমেশন একই বৈশিষ্ট্য অ্যানিমেট করা হয়.

কাউন্টারটিকে ট্রিগার করার জন্য anim.onremove ব্যবহার করে, প্রতিটি সরানো অ্যানিমেশনের সাথে একটি কাউন্টার মিলিয়ে কতগুলি অ্যানিমেশন প্রতিস্থাপিত হচ্ছে তা আপনি দেখতে পাবেন।

আপনার অ্যানিমেশন নিয়ন্ত্রণকে আরও এগিয়ে নেওয়ার জন্য কয়েকটি অতিরিক্ত পদ্ধতি রয়েছে:

• animation.replaceState() একটি অ্যানিমেশন সক্রিয়, স্থায়ী, বা সরানো কিনা তা ট্র্যাক করার একটি উপায় প্রদান করে।
• animation.commitStyles() একটি উপাদানের শৈলী আপডেট করে অন্তর্নিহিত শৈলীর উপর ভিত্তি করে এবং যৌগিক ক্রমে উপাদানের সমস্ত অ্যানিমেশনের সাথে।
• animation.persist() একটি অ্যানিমেশনকে অ-প্রতিস্থাপনযোগ্য হিসাবে চিহ্নিত করে।

দ্রষ্টব্য: animation.commitStyles() এবং animation.persist() সাধারণত কম্পোজিটিং মোডের সাথে ব্যবহৃত হয়, যেমন "অ্যাড"। নিচের কম্পোজিট মোডের ডেমো দেখুন যাতে সেগুলি কার্যকর হয়।

যৌগিক মোড সহ মসৃণ অ্যানিমেশন

ওয়েব অ্যানিমেশন API-এর সাহায্যে, আপনি এখন আপনার অ্যানিমেশনগুলির যৌগিক মোড সেট করতে পারেন, যার অর্থ "প্রতিস্থাপন" এর ডিফল্ট মোড ছাড়াও সেগুলি সংযোজন বা সঞ্চিত হতে পারে৷ কম্পোজিট মোডগুলি বিকাশকারীদেরকে স্বতন্ত্র অ্যানিমেশন লিখতে এবং প্রভাবগুলিকে কীভাবে একত্রিত করা হয় তার উপর নিয়ন্ত্রণ রাখতে দেয়। তিনটি যৌগিক মোড এখন সমর্থিত: 'replace' (ডিফল্ট মোড), 'add' এবং 'accumulate' ।

আপনি যখন অ্যানিমেশনগুলি সংমিশ্রিত করেন, তখন একজন বিকাশকারী সংক্ষিপ্ত, স্বতন্ত্র প্রভাবগুলি লিখতে পারে এবং সেগুলিকে একত্রিত দেখতে পারে। নীচের উদাহরণে, আমরা প্রতিটি বাক্সে একটি ঘূর্ণন এবং স্কেল কীফ্রেম প্রয়োগ করছি, একমাত্র সমন্বয় হল যৌগিক মোড, একটি বিকল্প হিসাবে যোগ করা হয়েছে:

একটি ডেমো যা ডিফল্ট, যোগ এবং কম্পোজিট মোডগুলিকে দেখায়৷ গ্লিচের ডেমো দেখুন

ডিফল্ট 'replace' কম্পোজিট মোডে, চূড়ান্ত অ্যানিমেশন ট্রান্সফর্ম প্রপার্টি প্রতিস্থাপন করে এবং rotate(360deg) scale(1.4) শেষ হয়। 'add' এর জন্য, কম্পোজিট ঘূর্ণন যোগ করে এবং স্কেলকে গুণ করে, যার ফলে rotate(720deg) scale(1.96) চূড়ান্ত অবস্থা হয়। 'accumulate' রূপান্তরগুলিকে একত্রিত করে, যার ফলে rotate(720deg) scale(1.8) । এই কম্পোজিট মোডগুলির জটিলতা সম্পর্কে আরও জানতে, ওয়েব অ্যানিমেশন স্পেক থেকে কম্পোজিট অপারেশন এবং কম্পোজিট অপারেশন অটো গণনাগুলি দেখুন৷

আসুন একটি UI উপাদান উদাহরণের দিকে নজর দেওয়া যাক:

একটি বাউন্সি ড্রপডাউন মেনু যাতে দুটি সংমিশ্রিত অ্যানিমেশন প্রয়োগ করা হয়৷ গ্লিচের ডেমো দেখুন

এখানে, দুটি top অ্যানিমেশন সংমিশ্রিত হয়. প্রথমটি হল একটি ম্যাক্রো-অ্যানিমেশন, যা পৃষ্ঠার উপরের দিক থেকে একটি স্লাইড-ইন প্রভাব হিসাবে মেনুর সম্পূর্ণ উচ্চতায় ড্রপডাউনকে সরিয়ে দেয় এবং দ্বিতীয়টি, একটি মাইক্রো-অ্যানিমেশন, এটি আঘাত করার সাথে সাথে সামান্য বাউন্স প্রয়োগ করে। নীচে 'add' কম্পোজিট মোড ব্যবহার করে একটি মসৃণ রূপান্তর সক্ষম করে।

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

ওয়েব অ্যানিমেশন এপিআই এর জন্য পরবর্তী কি

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

• Houdini API সহ স্ক্রোল-লিঙ্কড অ্যানিমেশন
• পরিবর্তনযোগ্য সময়রেখা
• গ্রুপ ইফেক্ট এবং সিঙ্ক্রোনাইজেশন