কিভাবে আমি আমার সলিটায়ার গেমের জন্য একটি অ্যানিমেশন লাইব্রেরি বেছে নিলাম

সেখানে অ্যানিমেশন লাইব্রেরির জন্য CSS এবং JavaScript উভয় লাইব্রেরির প্রাচুর্য রয়েছে। অনেক, আসলে, আপনার প্রকল্পের জন্য সঠিক একটি নির্বাচন করা অসম্ভব বলে মনে হতে পারে। যখন আমি একটি নির্মাণ করার সিদ্ধান্ত নিয়েছিলাম তখন আমি এই পরিস্থিতির মুখোমুখি হয়েছিলাম অনলাইন সলিটায়ার খেলা. আমি জানতাম আমার একটি অ্যানিমেশন লাইব্রেরি দরকার, কিন্তু কোনটি বেছে নেওয়ার জন্য সঠিক ছিল?

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

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

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

এখানেই লক্ষ্য

কোনো সিদ্ধান্ত নেওয়ার আগে আসুন গেমের এই CSS-ট্রিকস-ফাইড সংস্করণে আমাকে যে ধরণের অ্যানিমেশন তৈরি করতে হবে তা একবার দেখে নেওয়া যাক:

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

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

আমি এই নির্দিষ্ট কাজের জন্য সঠিক টুলের সন্ধানে গিয়েছিলাম বলে আমি আমার সাথে নিয়েছিলাম।

সিএসএস বা জাভাস্ক্রিপ্টের মধ্যে নির্বাচন করা অ্যানিমেশন লাইব্রেরি

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

আসুন দেখি সিএসএস-এ একটি সাধারণ সিকোয়েন্সড অ্যানিমেশন কেমন দেখায় এবং এটিকে jQuery-এর সাথে তুলনা করি, যেখানে প্রচুর বিল্ট-ইন অ্যানিমেশন সাহায্যকারী রয়েছে:

অ্যানিমেশন দেখতে একই কিন্তু ভিন্নভাবে তৈরি করা হয়। CSS অ্যানিমেশন তৈরি করতে, প্রথমে, আমাদের CSS-এ কীফ্রেম অ্যানিমেশন সংজ্ঞায়িত করতে হবে এবং এটি একটি ক্লাসে সংযুক্ত করতে হবে:

.card.move {
  animation : move 2s;
}

@keyframes move {
  0% { left: 0 }
  50% { left: 100px }
  100% { left: 0 }
}

তারপরে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে অ্যানিমেশন চালাই এবং উপাদানটিতে একটি CSS কলব্যাক শুনি:

var cardElement = document.getElementsByClassName("card")[0];
var statusElement = document.getElementsByClassName("status")[0];

cardElement.classList.add("move");
statusElement.innerHTML = "Animating"

var animationEndCallback = function() {
  cardElement.classList.remove("move");
  statusElement.innerHTML = "Inactive"
}

cardElement.addEventListener("webkitAnimationEnd", animationEndCallback);
cardElement.addEventListener("oAnimationEnd", animationEndCallback); 
cardElement.addEventListener("antionend", animationEndCallback);

বিভিন্ন জায়গায় জিনিসগুলি ঘটানোর মতো একটি সাধারণ উদাহরণে ভাল হতে পারে, তবে জিনিসগুলি আরও জটিল হয়ে গেলে এটি খুব বিভ্রান্তিকর হয়ে উঠতে পারে। 

jQuery এর সাথে কীভাবে অ্যানিমেশন করা হয় তার সাথে তুলনা করুন:

$(".status").text("Animating")
$( ".card" ).animate({
  left: "100px"
}, 1000);
$( ".card" ).animate({
  left: 0
}, 1000, function() {
  $(".status").text("Inactive")
});

এখানে, সবকিছু একই জায়গায় ঘটে, ভবিষ্যতে অ্যানিমেশনগুলি আরও জটিল হওয়া উচিত জিনিসগুলিকে সরল করা।

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

একটি জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি নির্বাচন করা

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

সার্জারির ওয়েব অ্যানিমেশন API এমন একটি কেস যা ভবিষ্যতে অনেক জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি প্রতিস্থাপন করতে পারে। এটির সাহায্যে, আপনি কোনও বাহ্যিক লাইব্রেরি লোড না করে এবং CSS অ্যানিমেশনগুলির মতো একই কার্যকারিতা সহ জটিল স্তব্ধ অ্যানিমেশন তৈরি করতে সক্ষম হবেন। একমাত্র অপূর্ণতা হল যে সব ব্রাউজার এখনও এটি সমর্থন করে না. 

সার্জারির <canvas> উপাদান আরেকটি উত্তেজনাপূর্ণ সুযোগ উপস্থাপন করে। এটিতে, আমরা জাভাস্ক্রিপ্ট দিয়ে জিনিসগুলিকে অ্যানিমেট করতে পারি, যেমনটি আমরা DOM এর সাথে করব, তবে অ্যানিমেশনটি রাস্টার হিসাবে রেন্ডার করা হয়, যার অর্থ আমরা কিছু উচ্চ-পারফরম্যান্স অ্যানিমেশন তৈরি করতে পারি। একমাত্র অসুবিধা হল যে ক্যানভাস উপাদানটি মূলত DOM-এ একটি চিত্র হিসাবে রেন্ডার করা হয়, তাই আমরা যদি পিক্সেল-পরিপূর্ণতা খুঁজছি, তাহলে আমাদের ভাগ্যের বাইরে হতে পারে। ডিজাইনের সাথে সূক্ষ্মভাবে কেউ হিসাবে, এটি আমার জন্য একটি ডিলব্রেকার ছিল।

আমার চেষ্টা করা এবং পরীক্ষিত কিছু দরকার ছিল, তাই আমি জানতাম যে আমাকে সম্ভবত অনেক জাভাস্ক্রিপ্ট লাইব্রেরির একটির সাথে যেতে হবে। আমি লাইব্রেরি দেখতে শুরু করেছি এবং আমার পছন্দগুলিকে সংকুচিত করেছি Anime.js এবং জিএসএপি. তারা উভয়ই জটিল অ্যানিমেশনগুলিকে ভালভাবে পরিচালনা করে বলে মনে হয়েছিল এবং পারফরম্যান্সের উপর দুর্দান্ত নোট ছিল। অ্যানিমে হল GitHub-এ 42.000 টিরও বেশি তারকা সহ একটি সু-পরিচালিত লাইব্রেরি, যখন GSAP একটি অত্যন্ত জনপ্রিয়, একটি সমৃদ্ধ সম্প্রদায়ের সাথে যুদ্ধ-পরীক্ষিত লাইব্রেরি।

একটি সক্রিয় সম্প্রদায় আমার কাছে গুরুত্বপূর্ণ ছিল যেহেতু আমার সাহায্য চাওয়ার জন্য একটি জায়গার প্রয়োজন ছিল এবং আমি এমন একটি লাইব্রেরি ব্যবহার করতে চাইনি যা পরে পরিত্যক্ত হতে পারে। আমি এটিকে আমার সুবিধার প্রয়োজনীয়তার অংশ হিসাবে বিবেচনা করেছি।

অ্যানিমেশন এবং কলব্যাক সিকোয়েন্সিং

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

উভয় অ্যানিমেশন মহান চেহারা! তারা মসৃণ, এবং তাদের উভয় বাস্তবায়ন ছিল বেশ সহজবোধ্য। উভয় লাইব্রেরি ছিল একটি টাইমলাইন ফাংশন যে সিকোয়েন্স তৈরি একটি হাওয়া করে তোলে. অ্যানিমেজেএস-এ বাস্তবায়নটি এইভাবে দেখায়:

var timeline = anime.timeline({
  begin: function() {
    $(".status").text("Animating")
  },
  complete: function() {
    $(".status").text("Inactive")
  }
});

timeline.add({
  targets: '.card',
  left: [0, 300],
  easing: 'easeInOutSine',
  duration: 500
}).add({
  targets: '.card .back',
  rotateY: [0, 90],
  easing: 'easeInSine',
  duration: 200
}).add({
  targets: '.card .front',
  rotateY: [-90, 0],
  easing: 'easeOutSine',
  duration: 200
})

অ্যানিমের timeline() ক্রিয়া অ্যানিমেশন শুরু এবং শেষ করার সময় কলব্যাক সহ বিল্ট-ইন আসে এবং সিকোয়েন্স তৈরি করা ক্রমিক অ্যানিমেশন যুক্ত করার মতোই সহজ। প্রথমে, আমি কার্ডটি সরান, তারপর আমি আমার পিছনের ছবি 90 ডিগ্রি ঘুরিয়ে দেই, তাই এটি দৃশ্যের বাইরে চলে যায়, এবং তারপর আমি আমার সামনের ছবি 90 ডিগ্রি ঘুরিয়ে দেই, তাই এটি দৃশ্যে আসে।

জিএসএপি ব্যবহার করে একই বাস্তবায়ন timeline() ক্রিয়া খুব অনুরূপ দেখায়:

var timeline = gsap.timeline({
  onStart: function() {
    $(".status").text("Animating")
  },
  onComplete: function() {
    $(".status").text("Inactive")
  }
});

timeline.fromTo(".card", {
  left: 0
}, {
  duration: 0.5,
  left: 300
}).fromTo(".card .back", {
  rotationY: 0
}, {
  rotationY: 90,
  ease: "power1.easeIn",
  duration: 0.2
}).fromTo(".card .front", {
  rotationY: -90
}, {
  rotationY: 0,
  ease: "power1.easeOut",
  duration: 0.2
})

সিদ্ধান্তের সময়

অ্যানিমে এবং জিএসএপির মধ্যে প্রধান পার্থক্যটি সিনট্যাক্স বলে মনে হচ্ছে, যেখানে জিএসএপি একটু বেশি বিস্তৃত হতে পারে। আমি দুটি দুর্দান্ত লাইব্রেরির সাথে আটকে ছিলাম যেগুলির কার্যকারিতা খুব একই ছিল, জটিল অ্যানিমেশন মোকাবেলা করতে সক্ষম হয়েছিল এবং একটি সমৃদ্ধ সম্প্রদায় ছিল। মনে হচ্ছিল টাই রেস করেছি!

অগ্রাধিকার	এনিমে	জিএসএপি
মসৃণ অ্যানিমেশন	✅	✅
সম্পাদন	✅	✅
সুবিধা	✅	✅
ব্রাউজার সমর্থন	✅	✅

তাহলে, কি আমাকে একটি লাইব্রেরি অন্যটির উপর বেছে নিল?

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

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

এবং যদিও GSAP এবং Anime উভয়ই কিছুক্ষণের কাছাকাছি হয়েছে, Anime এর রেপো কয়েক বছর ধরে কিছুটা সুপ্ত অবস্থায় বসে আছে যখন GSAP গত কয়েক মাসে প্রতিশ্রুতি দিয়েছে।

আমি GSAP ব্যবহার করে শেষ করেছি এবং আমার সিদ্ধান্তের জন্য অনুশোচনা করিনি!

তোমার কী অবস্থা? ফ্রন্ট-এন্ড টুলিংকে আপনি কীভাবে মূল্যায়ন এবং তুলনা করেন তার সাথে এই স্কোয়ারের কোনটি কি? এই ধরনের একটি প্রকল্পে আপনি কি অন্যান্য অগ্রাধিকার বিবেচনা করেছেন (যেমন অ্যাক্সেসযোগ্যতা, ইত্যাদি)? অথবা আপনার কি এমন একটি প্রকল্প আছে যেখানে আপনাকে বিভিন্ন বিকল্পের গুচ্ছ থেকে আপনার পছন্দগুলি কমিয়ে দিতে হয়েছিল? মন্তব্যে শেয়ার করুন কারণ আমি জানতে চাই! 

ওহ, এবং যদি আপনি দেখতে চান যে কার্ডের পুরো ডেক অ্যানিমেট করার সময় এটি কেমন দেখায়, আপনি আমার সাইটে যেতে পারেন এবং সলিটায়ারের একটি খেলা খেলুন। আনন্দ কর!