چگونه یک کتابخانه انیمیشن را برای بازی Solitaire من انتخاب کردم

کتابخانه‌های CSS و JavaScript فراوانی برای کتابخانه‌های انیمیشن وجود دارد. در واقع آنقدر زیاد است که انتخاب مناسب برای پروژه شما ممکن است غیرممکن به نظر برسد. این وضعیتی است که من زمانی که تصمیم به ساختن آن گرفتم با آن مواجه شدم بازی بازی یک نفره آنلاین. می دانستم که به یک کتابخانه انیمیشن نیاز دارم، اما کدام یک برای انتخاب مناسب است؟

در این مقاله، ملاحظاتی را که در نظر گرفته‌ام، مواردی که باید به آنها توجه کنیم را مرور می‌کنم و تعدادی از محبوب‌ترین کتابخانه‌های موجود را به شما معرفی می‌کنم. من چند مثال در دنیای واقعی را با شما مرور خواهم کرد تا نکاتم را توضیح دهم، و در پایان، امیدوارم زمانی که برای اولین بار مجبور به انتخاب یک کتابخانه انیمیشن شدم، از من مجهزتر باشید.

البته مسافت پیموده شده شما با این توصیه ممکن است متفاوت باشد. همه چیزهایی که در اینجا به اشتراک می گذارم مخصوص چیزی است که می خواستم بسازم. پروژه شما ممکن است الزامات و اولویت های کاملاً متفاوتی داشته باشد و این اشکالی ندارد. من فکر می کنم آنچه در اینجا مهم است دریافت یک حساب دست اول است مانند یک توسعه دهنده فرانت اند فکر کنید با یک هدف خاص

در مورد آن صحبت می کنم، من خودم را یک توسعه دهنده front-end می دانم اما پس زمینه من در طراحی فوق العاده سنگین است. بنابراین من کد می دانم، اما نه در حد کسی که مهندس جاوا اسکریپت است. فقط می خواستم آن را روشن کنم زیرا تجربه مطمئناً می تواند بر تصمیم نهایی تأثیر بگذارد.

هدف اینجاست

قبل از اینکه وارد هر تصمیم گیری شویم، بیایید نگاهی به انواع انیمیشن هایی که باید در این نسخه CSS-Tricks از بازی بسازم بیندازیم:

خیلی شیرینه، درسته؟ هیچ چیز کاملاً بی اهمیتی در مورد این انیمیشن ها وجود ندارد. چیزهای زیادی در حال انجام است - گاهی اوقات به طور همزمان - و چیزهای زیادی برای هماهنگ کردن. به علاوه، اکثر انیمیشن ها توسط تعاملات کاربر ایجاد می شوند. بنابراین، من را با چند اولویت در تصمیم خود قرار داد:

• انیمیشن های روان: روشی که انیمیشن‌ها به کار می‌روند می‌تواند تأثیر زیادی بر روان اجرا شدن آن‌ها یا نمایش کمی نابسامانی داشته باشد.
• عملکرد: پذیرش هر کتابخانه ای به یک پروژه وزن اضافه می کند و من می خواستم بازی من تا حد امکان ناب باشد.
• راحتی: من یک نحو زیبا و تمیز می‌خواستم که نوشتن و مدیریت انیمیشن‌ها را آسان‌تر کند. حتی اگر به من اجازه دهد کدهای بهتر و قابل نگهداری بیشتری بنویسم، کمی راحتی بیشتر را با هزینه عملکرد کمی عوض می کنم. باز هم، این نوید خوبی برای یک طراح تبدیل به توسعه دهنده است.
• پشتیبانی مرورگر: البته من می‌خواستم بازی من روی هر مرورگر مدرنی با استفاده از نوعی بهبود پیشرونده کار کند تا از خسته‌شدن کامل مرورگرهای قدیمی جلوگیری کند. بعلاوه، من قطعاً می‌خواهم برای آینده‌اش محافظت کنم.

این همان چیزی بود که با خودم بردم وقتی به دنبال ابزار مناسب برای این شغل خاص بودم.

انتخاب بین CSS یا جاوا اسکریپت کتابخانه های انیمیشن

اولین چیزی که هنگام انتخاب یک کتابخانه انیمیشن در نظر گرفتم این بود که آیا با یک کتابخانه CSS یا جاوا اسکریپت استفاده کنم. تعداد زیادی وجود دارد کتابخانه های CSS عالی، بسیاری از آنها با عملکرد عالی که برای من از اولویت بالایی برخوردار بود. من به دنبال انجام برخی انیمیشن‌های سنگین بودم، مانند توانایی توالی‌بندی انیمیشن‌ها و دریافت تماس پس از تکمیل انیمیشن. همه اینها با CSS خالص کاملاً امکان پذیر است - با این حال، این نرم افزار بسیار کمتر از آنچه اکثر کتابخانه های جاوا اسکریپت ارائه می دهند، است.

بیایید ببینیم که یک انیمیشن توالی ساده در CSS چگونه به نظر می رسد و آن را با jQuery مقایسه کنیم، که تعداد زیادی کمک کننده انیمیشن داخلی دارد:

انیمیشن ها یکسان به نظر می رسند اما متفاوت ساخته می شوند. برای ساخت انیمیشن CSS، ابتدا باید انیمیشن keyframe را در CSS خود تعریف کنیم و آن را به یک کلاس متصل کنیم:

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

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

سپس انیمیشن را با استفاده از جاوا اسکریپت اجرا می کنیم و به یک CSS callback روی عنصر گوش می دهیم:

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

در اینجا، همه چیز در یک مکان اتفاق می افتد، اگر انیمیشن ها در آینده پیچیده تر شوند، همه چیز ساده می شود.

به نظر واضح بود که کتابخانه جاوا اسکریپت راه درستی است، اما کدام یک برای بازی Solitaire من انتخاب مناسبی بود؟ منظورم این است که جی کوئری عالی است و حتی امروزه نیز به طور گسترده استفاده می شود، اما این چیزی نیست که بخواهم کلاهم را به آن آویزان کنم. تعداد زیادی کتابخانه انیمیشن جاوا اسکریپت وجود دارد، بنابراین می‌خواستم چیزی را در نظر بگیرم که به طور خاص برای کنترل نوع انیمیشن‌های سنگینی که در ذهن داشتم ساخته شده است.

انتخاب یک کتابخانه انیمیشن جاوا اسکریپت

به سرعت برای من آشکار شد که هیچ کمبودی در کتابخانه های انیمیشن جاوا اسکریپت و فن آوری های جدید و هیجان انگیز. همه آنها مزایا و معایبی دارند، بنابراین اجازه دهید برخی از مواردی که در نظر گرفتم و چرایی آن را مرور کنیم.

La Web Animations API یکی از این موارد است که ممکن است در آینده جایگزین بسیاری از کتابخانه های انیمیشن جاوا اسکریپت شود. با آن، می‌توانید انیمیشن‌های پیچیده پیچیده بدون بارگیری هیچ کتابخانه خارجی و با عملکردی مشابه انیمیشن‌های CSS ایجاد کنید. تنها ایرادش همینه هنوز همه مرورگرها از آن پشتیبانی نمی کنند. 

La <canvas> عنصر فرصت هیجان انگیز دیگری را ارائه می دهد. در آن، می‌توانیم چیزها را با جاوا اسکریپت متحرک کنیم، همانطور که با DOM انجام می‌دهیم، اما انیمیشن به صورت شطرنجی ارائه می‌شود، به این معنی که می‌توانیم چند انیمیشن با کارایی بالا بسازیم. تنها اشکال این است که عنصر بوم اساساً به عنوان یک تصویر در DOM ارائه می شود، بنابراین اگر به دنبال کامل بودن پیکسل هستیم، ممکن است شانس نداشته باشیم. به عنوان کسی که کاملاً با طراحی هماهنگ است، این برای من یک معامله شکن بود.

من به چیزی آزمایش شده و آزمایش شده نیاز داشتم، بنابراین می دانستم که احتمالاً باید با یکی از بسیاری از کتابخانه های جاوا اسکریپت بروم. شروع به نگاه کردن به کتابخانه‌ها کردم و انتخاب‌هایم را محدود کردم Anime.js و GSAP. به نظر می‌رسید که هر دوی آن‌ها به خوبی از پس انیمیشن‌های پیچیده برآمدند و یادداشت‌های عالی در عملکرد داشتند. انیمه یک کتابخانه به خوبی نگهداری شده با بیش از 42.000 ستاره در GitHub است، در حالی که 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 درجه می چرخانم، تا نمایان شود.

همان پیاده سازی با استفاده از GSAP 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
انیمیشن های صاف	✅	✅
عملکرد	✅	✅
راحتی	✅	✅
پشتیبانی از مرورگر	✅	✅

بنابراین، چه چیزی باعث شد که یک کتابخانه را بر دیگری انتخاب کنم؟

من بسیار نگران بودم که چگونه کتابخانه تحت فشار عمل کند. داشتن انیمیشن‌های لگی در بازی‌هایی مانند Solitaire می‌تواند تا حد زیادی بر لذت‌بخش بودن بازی تأثیر بگذارد. می‌دانستم قبل از ایجاد بازی نمی‌توانم به طور کامل عملکرد کتابخانه را ببینم. خوشبختانه، GSAP یک ساخته شده بود تست استرس که کتابخانه های مختلف انیمیشن از جمله انیمیشن را با یکدیگر مقایسه کرد.

با نگاهی به آن، GSAP مطمئناً به نظر می‌رسد که کتابخانه برتر برای مقابله با تعداد زیادی انیمیشن پیچیده باشد. GSAP روی یک انیمیشن سنگین به من 26 فریم در ثانیه می داد که انیمه تنها توانست 19 فریم آن را بالا ببرد. پس از مطالعه بیشتر در مورد GSAP و نگاهی به انجمن های آنها، مشخص شد که عملکرد بالاترین اولویت را برای بچه ها دارد. پشت GSAP

و با وجود اینکه هم GSAP و هم Anime برای مدتی وجود داشته اند، مخزن انیمه چند سالی است که تا حدودی خاموش مانده است در حالی که GSAP در چند ماه گذشته تعهداتی را انجام داده بود.

من در نهایت از GSAP استفاده کردم و از تصمیم خود پشیمان نشدم!

در مورد شما چطور؟ آیا هیچ کدام از اینها با نحوه ارزیابی و مقایسه ابزارهای جلویی شما مطابقت دارد؟ آیا اولویت های دیگری وجود دارد که ممکن است در پروژه ای مانند این در نظر گرفته باشید (مانند دسترسی و غیره)؟ یا آیا پروژه ای دارید که در آن مجبور شدید انتخاب های خود را از بین گزینه های مختلف کاهش دهید؟ لطفا در نظرات به اشتراک بگذارید زیرا من می خواهم بدانم! 

اوه، و اگر می خواهید ببینید که هنگام انیمیشن کردن یک دسته کامل از کارت ها چگونه به نظر می رسد، می توانید به سایت من بروید و بازی Solitaire را انجام دهید. خوش بگذره!