मैंने अपने सॉलिटेयर गेम के लिए एनिमेशन लाइब्रेरी कैसे चुनी

एनीमेशन पुस्तकालयों के लिए सीएसएस और जावास्क्रिप्ट दोनों पुस्तकालयों की बहुतायत है। इतने सारे, वास्तव में, कि आपकी परियोजना के लिए सही चुनना असंभव लग सकता है। जब मैंने एक निर्माण करने का फैसला किया तो मुझे यही स्थिति का सामना करना पड़ा ऑनलाइन सॉलिटेयर गेम. मुझे पता था कि मुझे एक एनीमेशन लाइब्रेरी की आवश्यकता होगी, लेकिन कौन सा चुनना सही था?

इस लेख में, मैं जानेंगे कि मैंने कौन से विचार किए, क्या देखना है और आपको कुछ सबसे लोकप्रिय पुस्तकालयों के साथ प्रस्तुत करना है। मैं अपने बिंदुओं को स्पष्ट करने के लिए आपके साथ कुछ वास्तविक दुनिया के उदाहरणों के माध्यम से जाऊंगा, और अंत में, उम्मीद है कि जब आप पहली बार एनीमेशन लाइब्रेरी का चयन करेंगे तो आप मुझसे बेहतर सुसज्जित होंगे।

इस सलाह के साथ आपका लाभ निश्चित रूप से भिन्न हो सकता है। मैं यहां जो कुछ भी साझा कर रहा हूं वह उस चीज के लिए विशिष्ट है जिसे मैं बनाना चाहता था। आपकी परियोजना में पूरी तरह से अलग आवश्यकताएं और प्राथमिकताएं हो सकती हैं और यह ठीक है। मुझे लगता है कि यहां जो महत्वपूर्ण है वह है का प्रत्यक्ष खाता प्राप्त करना फ्रंट-एंड डेवलपर की तरह सोच रहा है एक विशेष लक्ष्य के साथ।

जिसके बारे में बात करते हुए, मैं खुद को एक फ्रंट-एंड डेवलपर मानता हूं, लेकिन मेरी पृष्ठभूमि डिजाइन में बहुत भारी है। तो मैं कोड जानता हूं, लेकिन किसी ऐसे व्यक्ति की सीमा तक नहीं जो जावास्क्रिप्ट इंजीनियर है। बस इसे स्पष्ट करना चाहता था क्योंकि अनुभव निश्चित रूप से अंतिम निर्णय को प्रभावित कर सकता है।

ये रहा लक्ष्य

इससे पहले कि हम किसी भी निर्णय लेने में शामिल हों, आइए एक नज़र डालते हैं कि गेम के इस CSS-Tricks-ified संस्करण में मुझे किस प्रकार के एनिमेशन बनाने की आवश्यकता है:

बहुत प्यारा, है ना? इन एनिमेशनों के बारे में कुछ भी तुच्छ नहीं है। बहुत कुछ चल रहा है - कभी-कभी एक साथ - और बहुत कुछ ऑर्केस्ट्रेट करने के लिए। साथ ही, अधिकांश एनिमेशन उपयोगकर्ता इंटरैक्शन द्वारा ट्रिगर किए जाते हैं। इसलिए, इसने मुझे अपने निर्णय में कुछ प्राथमिकताओं के साथ छोड़ दिया:

• चिकना एनिमेशन: जिस तरह से एनिमेशन लागू किए जाते हैं, वे इस बात पर बड़ा प्रभाव डाल सकते हैं कि वे सुचारू रूप से चलते हैं, या थोड़ा तड़का लगाते हैं।
• प्रदर्शन: किसी भी पुस्तकालय को अपनाने से एक परियोजना में वजन बढ़ने वाला है और मैं चाहता था कि मेरा खेल जितना संभव हो उतना दुबला हो।
• सुविधा: मैं एक अच्छा, साफ-सुथरा सिंटैक्स चाहता था जिससे एनिमेशन लिखना और प्रबंधित करना आसान हो। अगर यह मुझे बेहतर, अधिक रखरखाव योग्य कोड लिखने की अनुमति देता है तो मैं एक छोटी प्रदर्शन लागत के लिए थोड़ी अतिरिक्त सुविधा का भी व्यापार करूंगा। फिर से, यह एक डिजाइनर से डेवलपर बने के लिए अच्छा है।
• ब्राउज़र समर्थन: निश्चित रूप से मैं चाहता था कि मेरा गेम किसी भी आधुनिक ब्राउज़र पर काम करे, जो किसी तरह के प्रगतिशील एन्हांसमेंट का उपयोग करके पूरी तरह से बोरिंग लीगेसी ब्राउज़रों को रोकने के लिए हो। इसके अलावा, मैं निश्चित रूप से कुछ भविष्य-प्रूफिंग चाहता था।

जब मैं इस विशेष नौकरी के लिए सही उपकरण की तलाश में गया तो मैं इसे अपने साथ ले गया।

CSS या JavaScript के बीच चयन करना एनिमेशन लाइब्रेरी

एनिमेशन लाइब्रेरी का चयन करते समय मैंने सबसे पहली बात यह सोची कि क्या सीएसएस या जावास्क्रिप्ट-आधारित लाइब्रेरी के साथ जाना है। बहुत सारे हैं महान सीएसएस पुस्तकालय, उनमें से कई उत्कृष्ट प्रदर्शन के साथ जो मेरे लिए एक उच्च प्राथमिकता थी। मैं कुछ भारी-भरकम एनिमेशन करना चाह रहा था, जैसे एनिमेशन को अनुक्रमित करने की क्षमता और एनीमेशन पूरा होने पर कॉलबैक प्राप्त करना। शुद्ध सीएसएस के साथ यह पूरी तरह से संभव है - फिर भी, यह अधिकांश जावास्क्रिप्ट पुस्तकालयों की तुलना में बहुत कम चिकनी है।

आइए देखें कि सीएसएस में एक साधारण अनुक्रमित एनीमेशन कैसा दिखता है और इसकी तुलना jQuery से करें, जिसमें बहुत सारे अंतर्निहित एनीमेशन सहायक हैं:

एनिमेशन एक जैसे दिखते हैं लेकिन अलग तरह से बनाए जाते हैं। CSS एनीमेशन बनाने के लिए, सबसे पहले, हमें अपने CSS में कीफ्रेम एनीमेशन को परिभाषित करना होगा और इसे एक क्लास से जोड़ना होगा:

.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 बहुत अच्छा है और आज भी व्यापक रूप से उपयोग किया जाता है, लेकिन ऐसा कुछ नहीं है जिस पर मैं अपनी टोपी लटकाना चाहता हूं। बहुत सारे जावास्क्रिप्ट एनीमेशन पुस्तकालय हैं, इसलिए मैं विशेष रूप से बनाए गए भारी एनिमेशन के प्रकार को संभालने के लिए विशेष रूप से निर्मित कुछ पर विचार करना चाहता था।

JavaScript एनिमेशन लाइब्रेरी चुनना

यह मेरे लिए जल्दी ही स्पष्ट हो गया कि जावास्क्रिप्ट एनीमेशन पुस्तकालयों की कोई कमी नहीं है और नई, रोमांचक प्रौद्योगिकियां. उन सभी के लाभ और कमियां हैं, तो आइए उनमें से कुछ पर विचार करें जिन पर मैंने विचार किया और क्यों।

RSI वेब एनिमेशन एपीआई एक ऐसा मामला है जो भविष्य में कई जावास्क्रिप्ट एनीमेशन पुस्तकालयों को प्रतिस्थापित कर सकता है। इसके साथ, आप किसी भी बाहरी लाइब्रेरी को लोड किए बिना और CSS एनिमेशन के समान प्रदर्शन के साथ जटिल कंपित एनिमेशन बनाने में सक्षम होंगे। एक ही कमी है कि सभी ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं. 

RSI <canvas> तत्व एक और रोमांचक अवसर प्रस्तुत करता है। इसमें, हम जावास्क्रिप्ट के साथ चीजों को चेतन कर सकते हैं, जैसा कि हम डोम के साथ करते हैं, लेकिन एनीमेशन को रेखापुंज के रूप में प्रस्तुत किया जाता है, जिसका अर्थ है कि हम कुछ उच्च-प्रदर्शन वाले एनिमेशन बना सकते हैं। एकमात्र कमी यह है कि कैनवास तत्व अनिवार्य रूप से डीओएम में एक छवि के रूप में प्रस्तुत किया जाता है, इसलिए यदि हम पिक्सेल-पूर्णता की तलाश में हैं, तो हम भाग्य से बाहर हो सकते हैं। जैसा कि कोई डिजाइन के अनुरूप है, यह मेरे लिए एक डीलब्रेकर था।

मुझे कुछ कोशिश और परीक्षण की ज़रूरत थी, इसलिए मुझे पता था कि मुझे शायद कई जावास्क्रिप्ट पुस्तकालयों में से एक के साथ जाना होगा। मैंने पुस्तकालयों को देखना शुरू किया और अपनी पसंद को सीमित कर दिया एनीमे.जेएस और जीएसएपी. वे दोनों जटिल एनिमेशन को अच्छी तरह से संभालते थे और प्रदर्शन पर उत्कृष्ट नोट्स रखते थे। एनीमे गिटहब पर 42.000 से अधिक सितारों के साथ एक सुव्यवस्थित पुस्तकालय है, जबकि जीएसएपी एक संपन्न समुदाय के साथ एक सुपर लोकप्रिय, युद्ध-परीक्षण वाला पुस्तकालय है।

एक सक्रिय समुदाय मेरे लिए महत्वपूर्ण था क्योंकि मुझे मदद मांगने के लिए जगह चाहिए थी, और मैं ऐसी लाइब्रेरी का उपयोग नहीं करना चाहता था जिसे बाद में छोड़ दिया जा सके। मैंने इसे अपनी सुविधा आवश्यकताओं के हिस्से के रूप में माना।

एनिमेशन और कॉलबैक अनुक्रमित करना

एक बार जब मेरी पसंद कम हो गई, तो अगला कदम मेरे दो पुस्तकालयों का उपयोग करके एक जटिल एनीमेशन को लागू करना था। एक सॉलिटेयर गेम में एक आवर्तक एनीमेशन एक कार्ड है जो कहीं घूम रहा है और फिर पलट रहा है, तो आइए देखें कि यह कैसा दिखता है:

दोनों एनिमेशन बहुत अच्छे लगते हैं! वे सहज हैं, और उन दोनों को लागू करना बहुत सीधा था। दोनों पुस्तकालयों में एक था समयरेखा समारोह जिसने सीक्वेंस को बनाना आसान बना दिया। 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
})

निर्णय समय

एनीमे और जीएसएपी के बीच मुख्य अंतर वाक्य रचना प्रतीत होता है, जहां जीएसएपी थोड़ा अधिक विस्तृत हो सकता है। मैं दो महान पुस्तकालयों के साथ फंस गया था जिनकी कार्यक्षमता बहुत समान थी, जो जटिल एनीमेशन से निपटने में सक्षम थे, और एक संपन्न समुदाय था। ऐसा लग रहा था कि मेरी टाई रेस हो गई है!

प्राथमिकता	मोबाइल फोनों	जीएसएपी
चिकनी एनिमेशन	✅	✅
प्रदर्शन	✅	✅
सुविधा	✅	✅
ब्राउज़र समर्थन	✅	✅

तो, किस वजह से मैंने एक पुस्तकालय को दूसरे के ऊपर चुना?

मुझे इस बात की बहुत चिंता थी कि पुस्तकालय दबाव में कैसे कार्य करेगा। सॉलिटेयर जैसे गेम में लैगी एनिमेशन होने से यह बहुत प्रभावित हो सकता है कि गेम खेलने में कितना मज़ा आता है। मुझे पता था कि मैं पूरी तरह से यह नहीं देख पाऊंगा कि खेल बनाने से पहले पुस्तकालय ने कैसा प्रदर्शन किया। सौभाग्य से, जीएसएपी ने एक बना दिया था तनाव परीक्षण जिसने एनीमे सहित विभिन्न एनीमेशन पुस्तकालयों की एक दूसरे से तुलना की।

इसे देखते हुए, जीएसएपी निश्चित रूप से जटिल एनिमेशन के भार से निपटने के लिए बेहतर पुस्तकालय लग रहा था। जीएसएपी मुझे एक भारी एनीमेशन पर 26 फ्रेम प्रति सेकेंड के ऊपर दे रहा था कि एनीम केवल 19 XNUMX में शीर्ष पर पहुंचने में सक्षम था। जीएसएपी पर और अधिक पढ़ने और उनके मंचों को देखने के बाद, यह स्पष्ट हो गया कि प्रदर्शन लोगों के लिए सर्वोच्च प्राथमिकता थी जीएसएपी के पीछे।

और भले ही जीएसएपी और एनीम दोनों कुछ समय के आसपास रहे हों, एनीम का रेपो कुछ सालों से कुछ हद तक निष्क्रिय रहा है जबकि जीएसएपी ने पिछले कुछ महीनों में काम किया था।

मैंने जीएसएपी का उपयोग करना समाप्त कर दिया और मुझे अपने निर्णय पर खेद नहीं हुआ!

आप कैसे हैं? क्या इस वर्ग में से कोई भी आपके द्वारा फ़्रंट-एंड टूलिंग का मूल्यांकन और तुलना करने के तरीके से संबंधित है? क्या ऐसी अन्य प्राथमिकताएं हैं जिन पर आपने विचार किया होगा (उदा. अभिगम्यता, आदि) इस तरह की परियोजना में? या क्या आपके पास कोई प्रोजेक्ट है जहां आपको विभिन्न विकल्पों के समूह से अपनी पसंद को कम करना पड़ा? कृपया टिप्पणियों में साझा करें क्योंकि मैं जानना चाहता हूं! 

ओह, और यदि आप यह देखना चाहते हैं कि कार्ड के पूरे डेक को एनिमेट करते समय यह कैसा दिखता है, तो आप मेरी साइट पर जा सकते हैं और सॉलिटेयर का खेल खेलें। मजे करो!