میں نے اپنے سولیٹیئر گیم کے لیے اینیمیشن لائبریری کا انتخاب کیسے کیا۔

وہاں اینیمیشن لائبریریوں کے لیے CSS اور JavaScript دونوں لائبریریوں کی کثرت ہے۔ بہت سے، حقیقت میں، آپ کے منصوبے کے لئے صحیح ایک کا انتخاب ناممکن لگ سکتا ہے. جب میں نے ایک بنانے کا فیصلہ کیا تو مجھے اس صورتحال کا سامنا کرنا پڑا آن لائن سولٹیئر کھیل. میں جانتا تھا کہ مجھے ایک اینیمیشن لائبریری کی ضرورت ہے، لیکن کون سا انتخاب کرنا صحیح تھا؟

اس مضمون میں، میں اس بات پر غور کروں گا کہ میں نے کن کن باتوں پر غور کیا، کن چیزوں کا خیال رکھنا ہے اور آپ کو دستیاب چند مشہور لائبریریوں کے ساتھ پیش کرنا ہے۔ میں اپنے نکات کو واضح کرنے کے لیے آپ کے ساتھ کچھ حقیقی دنیا کی مثالوں سے گزروں گا، اور آخر میں، امید ہے کہ جب مجھے پہلی بار ایک اینیمیشن لائبریری کا انتخاب کرنا پڑا تو آپ مجھ سے بہتر طریقے سے لیس ہوں گے۔

اس مشورے کے ساتھ آپ کا مائلیج یقیناً مختلف ہو سکتا ہے۔ میں یہاں جو کچھ بھی شیئر کر رہا ہوں وہ اس چیز کے لیے مخصوص ہے جسے میں بنانا چاہتا ہوں۔ آپ کے پروجیکٹ کی ضروریات اور ترجیحات بالکل مختلف ہو سکتی ہیں اور یہ ٹھیک ہے۔ میرے خیال میں یہاں جو چیز اہم ہے وہ پہلے ہاتھ کا اکاؤنٹ حاصل کرنا ہے۔ ایک فرنٹ اینڈ ڈویلپر کی طرح سوچنا ایک خاص مقصد کے ساتھ۔

جس کے بارے میں بات کرتے ہوئے، میں اپنے آپ کو ایک فرنٹ اینڈ ڈویلپر سمجھتا ہوں لیکن میرا پس منظر ڈیزائن میں بہت بھاری ہے۔ لہذا میں کوڈ جانتا ہوں، لیکن کسی ایسے شخص کی حد تک نہیں جو جاوا اسکرپٹ انجینئر ہے۔ صرف اس کو صاف کرنا چاہتا تھا کیونکہ تجربہ یقینی طور پر حتمی فیصلے کو متاثر کر سکتا ہے۔

یہ ہے مقصد

اس سے پہلے کہ ہم کسی بھی فیصلہ سازی میں شامل ہوں، آئیے اس قسم کی اینیمیشنز پر ایک نظر ڈالتے ہیں جن کی مجھے گیم کے اس CSS-Tricks-ified ورژن میں کرنے کی ضرورت تھی۔

بہت پیارا، ٹھیک ہے؟ ان متحرک تصاویر کے بارے میں بالکل معمولی بات نہیں ہے۔ بہت کچھ ہو رہا ہے — کبھی کبھی بیک وقت — اور آرکیسٹریٹ کرنے کے لیے بہت کچھ۔ اس کے علاوہ، زیادہ تر متحرک تصاویر صارف کے تعاملات سے متحرک ہوتی ہیں۔ لہذا، اس نے مجھے اپنے فیصلے کی طرف جانے والی چند ترجیحات کے ساتھ چھوڑ دیا:

• ہموار متحرک تصاویر: جس طرح سے اینیمیشنز کو لاگو کیا جاتا ہے اس کا اس بات پر بڑا اثر پڑ سکتا ہے کہ آیا وہ آسانی سے چلتی ہیں، یا تھوڑا سا چپچپا پن دکھاتی ہیں۔
• : کارکردگی کسی بھی لائبریری کو اپنانا کسی پروجیکٹ میں وزن بڑھاتا ہے اور میں چاہتا تھا کہ میرا گیم زیادہ سے زیادہ دبلا ہو۔
• سہولت: میں ایک اچھا، صاف نحو چاہتا تھا جو اینیمیشن کو لکھنا اور ان کا نظم کرنا آسان بناتا ہے۔ یہاں تک کہ میں ایک چھوٹی سی کارکردگی کی لاگت کے لئے تھوڑی اضافی سہولت بھی تجارت کروں گا اگر یہ مجھے بہتر، زیادہ برقرار رکھنے والا کوڈ لکھنے کی اجازت دیتا ہے۔ ایک بار پھر، یہ ایک ڈیزائنر سے بنے ڈویلپر کے لیے اچھی بات ہے۔
• براؤزر سپورٹ: بلاشبہ میں چاہتا تھا کہ میرا گیم کسی بھی جدید براؤزر پر کام کرے تاکہ کسی نہ کسی طرح کے ترقی پسندانہ اضافہ کو مکمل طور پر بورنگ لیگیسی براؤزرز کو روکا جا سکے۔ اس کے علاوہ، میں یقینی طور پر کچھ مستقبل کا ثبوت چاہتا تھا۔

یہ وہی ہے جو میں نے اپنے ساتھ لیا جب میں اس خاص کام کے لیے صحیح ٹول کی تلاش میں گیا تھا۔

CSS یا JavaScript کے درمیان انتخاب کرنا حرکت پذیری لائبریریاں

اینیمیشن لائبریری کا انتخاب کرتے وقت میں نے پہلی چیز پر غور کیا کہ آیا سی ایس ایس یا جاوا اسکرپٹ پر مبنی لائبریری کے ساتھ جانا ہے۔ وہاں بہت ہیں عظیم سی ایس ایس لائبریریاں، ان میں سے بہت سے بہترین کارکردگی کے ساتھ جو میرے لئے ایک اعلی ترجیح تھی۔ میں کچھ ہیوی ڈیوٹی اینیمیشنز کرنے کی کوشش کر رہا تھا، جیسے اینیمیشن کو ترتیب دینے اور اینیمیشن کی تکمیل پر کال بیکس حاصل کرنے کی صلاحیت۔ یہ سب خالص CSS کے ساتھ مکمل طور پر ممکن ہے — پھر بھی، یہ اس سے بہت کم ہموار ہے جو زیادہ تر JavaScript لائبریریاں پیش کرتی ہیں۔

آئیے دیکھتے ہیں کہ سی ایس ایس میں ایک سادہ سیکونسڈ اینیمیشن کیسی دکھتی ہے اور اس کا موازنہ jQuery سے کریں، جس میں کافی تعداد میں بلٹ ان اینیمیشن مددگار ہیں:

متحرک تصاویر ایک جیسی نظر آتی ہیں لیکن مختلف طریقے سے بنائی جاتی ہیں۔ سی ایس ایس اینیمیشن بنانے کے لیے، سب سے پہلے، ہمیں اپنے سی ایس ایس میں کلیدی فریم اینیمیشن کی وضاحت کرنی ہوگی اور اسے کلاس سے منسلک کرنا ہوگا:

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

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

اس کے بعد ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے اینیمیشن پر عمل کرتے ہیں اور عنصر پر سی ایس ایس کال بیک سنتے ہیں:

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 اور جی ایس اے پی. وہ دونوں پیچیدہ متحرک تصاویر کو اچھی طرح سے ہینڈل کرتے دکھائی دیتے تھے اور ان کی کارکردگی پر بہترین نوٹ تھے۔ Anime GitHub پر 42.000 سے زیادہ ستاروں کے ساتھ ایک اچھی طرح سے برقرار رکھنے والی لائبریری ہے، جبکہ GSAP ایک ترقی پذیر کمیونٹی کے ساتھ ایک انتہائی مقبول، جنگ کی آزمائشی لائبریری ہے۔

ایک فعال کمیونٹی میرے لیے اہم تھی کیونکہ مجھے مدد مانگنے کے لیے جگہ کی ضرورت تھی، اور میں ایسی لائبریری استعمال نہیں کرنا چاہتا تھا جسے بعد میں ترک کر دیا جائے۔ میں نے اسے اپنی سہولت کے تقاضوں کا حصہ سمجھا۔

متحرک تصاویر اور کال بیکس کو ترتیب دینا

ایک بار جب میں نے اپنے انتخاب کو کم کر دیا تو، اگلا مرحلہ اپنی دو لائبریریوں کا استعمال کرتے ہوئے ایک پیچیدہ حرکت پذیری کو نافذ کرنا تھا۔ سولٹیئر گیم میں ایک بار بار چلنے والی حرکت پذیری ایک کارڈ کی ہے جو کسی جگہ حرکت کرتی ہے اور پھر پلٹ جاتی ہے، تو آئیے دیکھتے ہیں کہ یہ کیسا لگتا ہے:

دونوں متحرک تصاویر بہت اچھی لگ رہی ہیں! وہ ہموار ہیں، اور ان دونوں کو لاگو کرنا بہت سیدھا تھا۔ دونوں لائبریریوں میں اے ٹائم لائن فنکشن جس نے ترتیب کو ہوا کا جھونکا بنا دیا۔ AnimeJS میں عمل درآمد اس طرح نظر آتا ہے:

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
})

فیصلہ وقت

Anime اور GSAP کے درمیان بنیادی فرق نحو کا ہوتا ہے، جہاں GSAP تھوڑا زیادہ وسیع ہو سکتا ہے۔ میں دو عظیم لائبریریوں کے ساتھ پھنس گیا تھا جن کی فعالیت بہت ملتی جلتی تھی، پیچیدہ حرکت پذیری سے نمٹنے کے قابل تھی، اور ایک فروغ پزیر کمیونٹی تھی۔ ایسا لگتا تھا کہ میں نے ٹائی ریس کی ہے!

ترجیح	ہالی ووڈ	جی ایس اے پی
ہموار متحرک تصاویر	✅	✅
کارکردگی	✅	✅
سہولت	✅	✅
براؤزر کی حمایت	✅	✅

تو، کس چیز نے مجھے ایک لائبریری پر دوسری لائبریری کا انتخاب کرنے پر مجبور کیا؟

میں بہت فکر مند تھا کہ لائبریری دباؤ میں کیسے کام کرے گی۔ سولیٹیئر جیسے گیم میں لیگی اینیمیشنز کا ہونا بہت زیادہ متاثر کر سکتا ہے کہ گیم کھیلنے میں کتنا مزہ آتا ہے۔ میں جانتا تھا کہ میں گیم بنانے سے پہلے یہ پوری طرح سے نہیں دیکھ سکوں گا کہ لائبریری کی کارکردگی کیسی ہے۔ خوش قسمتی سے، GSAP نے ایک بنایا تھا۔ دباؤ کی جانچ پڑتال جس نے مختلف اینیمیشن لائبریریوں کا ایک دوسرے سے موازنہ کیا، بشمول Anime۔

اس کو دیکھتے ہوئے، GSAP یقینی طور پر پیچیدہ متحرک تصاویر کے بوجھ سے نمٹنے کے لیے ایک اعلیٰ لائبریری معلوم ہوتا ہے۔ GSAP مجھے ایک بھاری اینیمیشن پر 26 فریم فی سیکنڈ سے اوپر دے رہا تھا جسے Anime صرف 19 پر ہی ٹاپ آؤٹ کرنے میں کامیاب رہا۔ GSAP کے پیچھے

اور اگرچہ GSAP اور Anime دونوں ہی کچھ عرصہ گزر چکے ہیں، Anime کا ریپو کچھ سالوں سے کچھ غیر فعال ہے جبکہ GSAP نے پچھلے چند مہینوں میں کمٹمنٹ کی تھی۔

میں نے GSAP کا استعمال ختم کر دیا اور اپنے فیصلے پر افسوس نہیں کیا!

تم کیسے ھو؟ کیا اس مربع میں سے کوئی بھی اس بات کے ساتھ ہے کہ آپ کس طرح فرنٹ اینڈ ٹولنگ کا اندازہ اور موازنہ کرتے ہیں؟ کیا ایسی دوسری ترجیحات ہیں جن پر آپ نے غور کیا ہوگا (مثلاً رسائی، وغیرہ) اس طرح کے پروجیکٹ میں؟ یا کیا آپ کے پاس کوئی پروجیکٹ ہے جہاں آپ کو مختلف اختیارات کے ایک گروپ سے اپنی پسند کو کم کرنا پڑا؟ براہ کرم تبصروں میں اشتراک کریں کیونکہ میں جاننا چاہتا ہوں! 

اوہ، اور اگر آپ یہ دیکھنا چاہتے ہیں کہ کارڈز کے پورے ڈیک کو متحرک کرتے وقت یہ کیسا لگتا ہے، آپ میری سائٹ پر جا سکتے ہیں اور سولٹیئر کا کھیل کھیلو. مزے کرو!