كيف اخترت مكتبة الرسوم المتحركة للعبة Solitaire الخاصة بي

هناك وفرة في مكتبات CSS و JavaScript لمكتبات الرسوم المتحركة هناك. الكثير ، في الواقع ، أن اختيار الشخص المناسب لمشروعك قد يبدو مستحيلاً. هذا هو الموقف الذي واجهته عندما قررت بناء لعبة سوليتير على الانترنت. كنت أعلم أنني سأحتاج إلى مكتبة رسوم متحركة ، ولكن أيهما كان الخيار الصحيح؟

في هذه المقالة ، سأستعرض الاعتبارات التي وضعتها ، وما الذي يجب أن تبحث عنه وأقدم لك بعضًا من أكثر المكتبات المتاحة شيوعًا. سأستعرض معك بعض الأمثلة الواقعية لتوضيح نقاطي ، وفي النهاية ، آمل أن تكون أفضل تجهيزًا مني عندما اضطررت إلى اختيار مكتبة رسوم متحركة لأول مرة.

قد تختلف المسافة المقطوعة بهذه النصيحة ، بالطبع. كل ما أشاركه هنا خاص بشيء أردت بناءه. قد يكون لمشروعك متطلبات وأولويات مختلفة تمامًا ولا بأس بذلك. أعتقد أن المهم هنا هو الحصول على حساب مباشر يفكر مثل مطور الواجهة الأمامية بهدف معين.

عند الحديث عن ذلك ، أعتبر نفسي مطورًا للواجهة الأمامية ولكن خلفيتي ثقيلة جدًا في التصميم. لذا فأنا أعرف الكود ، لكن ليس بقدر ما هو مهندس جافا سكريبت. أردت فقط توضيح ذلك لأن التجربة يمكن أن تؤثر بالتأكيد على القرار النهائي.

هذا هو الهدف

قبل أن ندخل في أي عملية صنع قرار ، دعنا نلقي نظرة على أنواع الرسوم المتحركة التي احتجت لعملها في نسخة CSS-Tricks-ified هذه من اللعبة:

جميلة جدا ، أليس كذلك؟ لا يوجد شيء تافه تمامًا في هذه الرسوم المتحركة. هناك الكثير مما يحدث - أحيانًا في وقت واحد - والكثير لتنسيقه. بالإضافة إلى ذلك ، يتم تشغيل غالبية الرسوم المتحركة من خلال تفاعلات المستخدم. لذلك ، ترك هذا الأمر مع بعض الأولويات في قراري:

• الرسوم المتحركة السلسة: يمكن أن يكون للطريقة التي يتم بها تطبيق الرسوم المتحركة تأثير كبير على ما إذا كانت تعمل بسلاسة أو تعرض القليل من التقلب.
• الأداء: سيؤدي اعتماد أي مكتبة إلى زيادة وزن المشروع وأردت أن تكون لعبتي بسيطة قدر الإمكان.
• الراحة: أردت بنية لطيفة ونظيفة تجعل من السهل كتابة وإدارة الرسوم المتحركة. حتى أنني كنت سأقايض بعض الراحة الإضافية مقابل تكلفة أداء صغيرة إذا سمحت لي بكتابة كود أفضل وأكثر قابلية للصيانة. مرة أخرى ، هذا يبشر بالخير لمصمم تحول إلى مطور.
• دعم المتصفح: بالطبع أردت أن تعمل لعبتي على أي متصفح حديث باستخدام شكل من أشكال التحسين التدريجي لمنع المتصفحات القديمة تمامًا. بالإضافة إلى ذلك ، أردت بالتأكيد بعض التدقيق في المستقبل.

هذا ما أخذته معي أثناء بحثي عن الأداة المناسبة لهذه الوظيفة بالذات.

الاختيار بين CSS أو JavaScript مكتبات الرسوم المتحركة

أول شيء فكرت فيه عند اختيار مكتبة الرسوم المتحركة هو استخدام مكتبة CSS أو JavaScript. هناك الكثير من مكتبات CSS رائعة، العديد منهم بأداء ممتاز كان يمثل أولوية قصوى بالنسبة لي. كنت أتطلع إلى عمل بعض الرسوم المتحركة شديدة التحمل ، مثل القدرة على تسلسل الرسوم المتحركة والحصول على ردود نداء عند اكتمال الرسوم المتحركة. كل هذا ممكن تمامًا باستخدام CSS النقي - ومع ذلك ، فهو أقل سلاسة مما تقدمه معظم مكتبات JavaScript.

دعونا نرى كيف تبدو الرسوم المتحركة المتسلسلة البسيطة في CSS ونقارنها بـ jQuery ، الذي يحتوي على الكثير من المساعدين للرسوم المتحركة المضمنة:

تبدو الرسوم المتحركة كما هي ولكن يتم إنشاؤها بشكل مختلف. لعمل الرسوم المتحركة لـ CSS ، أولاً ، علينا تحديد الرسوم المتحركة للإطار الرئيسي في CSS وإرفاقها بفصل:

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

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

ثم ننفذ الرسوم المتحركة باستخدام JavaScript ونستمع إلى رد اتصال 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")
});

هنا ، كل شيء يحدث في نفس المكان ، وتبسيط الأشياء إذا أصبحت الرسوم المتحركة أكثر تعقيدًا في المستقبل.

بدا واضحًا أن مكتبة JavaScript كانت هي الطريقة الصحيحة للذهاب ، ولكن ما هو الخيار الصحيح للعبة Solitaire الخاصة بي؟ أعني ، jQuery رائع و لا يزال يستخدم على نطاق واسع حتى اليوم، لكن هذا ليس شيئًا أريد تعليق قبعتي عليه. هناك الكثير من مكتبات الرسوم المتحركة في JavaScript ، لذلك أردت التفكير في شيء مصمم خصيصًا للتعامل مع نوع الرسوم المتحركة الثقيلة التي كنت أفكر فيها.

اختيار مكتبة الرسوم المتحركة JavaScript

سرعان ما اتضح لي أنه لا يوجد نقص في مكتبات الرسوم المتحركة JavaScript و تقنيات جديدة ومثيرة. لديهم جميعًا مزايا وعيوب ، لذلك دعونا نتناول بعضًا من تلك التي فكرت فيها ولماذا.

• واجهة برمجة تطبيقات الويب المتحركة هي إحدى هذه الحالات التي قد تحل محل العديد من مكتبات الرسوم المتحركة في JavaScript في المستقبل. باستخدامه ، ستتمكن من إنشاء رسوم متحركة معقدة متداخلة دون تحميل أي مكتبات خارجية وبنفس أداء الرسوم المتحركة في CSS. العيب الوحيد هو ذلك ليست كل المتصفحات تدعمها حتى الآن. 

• <canvas> يقدم عنصر فرصة أخرى مثيرة. في ذلك ، يمكننا تحريك الأشياء باستخدام JavaScript ، كما نفعل مع DOM ، ولكن يتم تقديم الرسوم المتحركة على هيئة نقطية ، مما يعني أنه يمكننا إنشاء بعض الرسوم المتحركة عالية الأداء. العيب الوحيد هو أن عنصر Canvas يتم تقديمه بشكل أساسي كصورة في DOM ، لذلك إذا كنا نبحث عن الكمال في البكسل ، فقد لا يحالفنا الحظ. باعتباري شخصًا متوافقًا تمامًا مع التصميم ، كان هذا بمثابة كسر للصفقات بالنسبة لي.

كنت بحاجة إلى شيء تم تجربته واختباره ، لذلك علمت أنه ربما يتعين علي استخدام إحدى مكتبات JavaScript العديدة. بدأت أبحث في المكتبات وقلصت خياراتي إلى Anime.js و GSAP. كلاهما يبدو أنهما يتعاملان مع الرسوم المتحركة المعقدة بشكل جيد ولديهما ملاحظات ممتازة عن الأداء. Anime هي مكتبة جيدة الصيانة بها أكثر من 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 ملف اختبار الإجهاد التي قارنت مكتبات الرسوم المتحركة المختلفة ببعضها البعض ، بما في ذلك Anime.

بالنظر إلى ذلك ، بدا GSAP بالتأكيد أنه المكتبة المتفوقة للتعامل مع الكثير من الرسوم المتحركة المعقدة. كان GSAP يعطيني ما يزيد عن 26 إطارًا في الثانية على رسوم متحركة ثقيلة لم يتمكن Anime من تجاوزها إلا في 19. بعد القراءة على GSAP أكثر والنظر في منتدياتهم ، أصبح من الواضح أن الأداء كان ذا أولوية قصوى للرجال خلف GSAP.

وعلى الرغم من أن كلا من GSAP و Anime كانا موجودين منذ فترة ، إلا أن ريبو Anime ظل خامدًا إلى حد ما بضع سنوات بينما قدم GSAP تعهدات في الشهرين الماضيين.

انتهى بي الأمر باستخدام GSAP ولم أندم على قراري!

ماذا عنك؟ هل يوجد أي من هذه المربعات مع كيفية تقييم ومقارنة أدوات الواجهة الأمامية؟ هل هناك أولويات أخرى ربما تكون قد فكرت فيها (مثل إمكانية الوصول ، وما إلى ذلك) في مشروع كهذا؟ أو هل لديك مشروع كان عليك فيه تقليل اختياراتك من بين مجموعة من الخيارات المختلفة؟ يرجى المشاركة في التعليقات لأنني أود أن أعرف! 

أوه ، وإذا كنت تريد أن ترى كيف يبدو عند تحريك مجموعة كاملة من البطاقات ، فيمكنك التوجه إلى موقعي و العب لعبة سوليتير. استمتع!