ฉันจะเลือกไลบรารีแอนิเมชันสำหรับเกม Solitaire ของฉันได้อย่างไร

มีไลบรารี CSS และ JavaScript มากมายสำหรับไลบรารีแอนิเมชั่น อันที่จริงแล้ว การเลือกสิ่งที่ถูกต้องสำหรับโครงการของคุณอาจดูเหมือนเป็นไปไม่ได้ นั่นคือสถานการณ์ที่ฉันเผชิญเมื่อตัดสินใจสร้าง เกมเล่นไพ่คนเดียวออนไลน์. ฉันรู้ว่าฉันต้องการไลบรารีแอนิเมชั่น แต่จะเลือกอันไหนดี?

ในบทความนี้ ฉันจะพิจารณาถึงสิ่งที่ควรพิจารณา สิ่งที่ควรระวัง และนำเสนอไลบรารียอดนิยมบางส่วนที่มีให้คุณ ฉันจะยกตัวอย่างในโลกแห่งความเป็นจริงกับคุณเพื่อแสดงประเด็นของฉัน และในท้ายที่สุด หวังว่าคุณจะพร้อมกว่าฉันเมื่อฉันต้องเลือกไลบรารีแอนิเมชั่นเป็นครั้งแรก

ระยะทางของคุณกับคำแนะนำนี้อาจแตกต่างกันไปแน่นอน ทุกสิ่งที่ฉันแบ่งปันที่นี่มีความเฉพาะเจาะจงกับสิ่งที่ฉันอยากจะสร้าง โครงการของคุณอาจมีข้อกำหนดและลำดับความสำคัญที่แตกต่างกันโดยสิ้นเชิง ไม่เป็นไร ฉันคิดว่าสิ่งที่สำคัญที่นี่คือการได้รับบัญชีโดยตรงของ คิดเหมือนนักพัฒนา front-end โดยมีเป้าหมายเฉพาะ

ฉันคิดว่าตัวเองเป็นนักพัฒนา front-end แต่พื้นหลังของฉันนั้นหนักมากในด้านการออกแบบ ดังนั้นฉันรู้รหัส แต่ไม่ใช่คนที่เป็นวิศวกร JavaScript เพียงต้องการชี้แจงว่าเนื่องจากประสบการณ์สามารถส่งผลต่อการตัดสินใจขั้นสุดท้ายได้อย่างแน่นอน

นี่แหละเป้าหมาย

ก่อนที่เราจะเข้าสู่การตัดสินใจใดๆ มาดูแอนิเมชั่นประเภทต่างๆ ที่ฉันต้องทำในเกมเวอร์ชันแก้ไข CSS-Tricks:

สวยหวานใช่มั้ย? แอนิเมชั่นเหล่านี้ไม่มีเรื่องเล็กน้อย มีหลายสิ่งหลายอย่างเกิดขึ้น—บางครั้งพร้อมกัน—และยังมีอีกมากที่ต้องเตรียมการ นอกจากนี้ แอนิเมชั่นส่วนใหญ่ยังถูกกระตุ้นจากการโต้ตอบของผู้ใช้ นั่นทำให้ฉันมีลำดับความสำคัญบางประการในการตัดสินใจของฉัน:

• ภาพเคลื่อนไหวที่ราบรื่น: วิธีการใช้แอนิเมชั่นสามารถมีผลกระทบอย่างมากต่อการทำงานอย่างราบรื่นหรือแสดงอาการกระตุกเล็กน้อย
• ประสิทธิภาพ: การนำไลบรารี่มาใช้จะเพิ่มน้ำหนักให้กับโปรเจ็กต์ และฉันต้องการให้เกมของฉันมีความบางที่สุดเท่าที่จะเป็นไปได้
• สะดวก: ฉันต้องการรูปแบบที่ดีและสะอาดตาที่ช่วยให้เขียนและจัดการแอนิเมชั่นได้ง่ายขึ้น ฉันยังต้องการแลกความสะดวกสบายเพิ่มเติมเล็กน้อยด้วยค่าใช้จ่ายด้านประสิทธิภาพเพียงเล็กน้อย ถ้ามันช่วยให้ฉันเขียนโค้ดที่ดีขึ้นและบำรุงรักษาได้มากขึ้น อีกครั้งนี้เป็นลางดีสำหรับนักออกแบบที่หันมาพัฒนา
• การสนับสนุนเบราว์เซอร์: แน่นอน ฉันต้องการให้เกมของฉันทำงานบนเบราว์เซอร์รุ่นใหม่ๆ โดยใช้รูปแบบการเพิ่มประสิทธิภาพแบบก้าวหน้าเพื่อป้องกันไม่ให้เบราว์เซอร์รุ่นเก่าทำงานจนหมด นอกจากนี้ฉันต้องการการพิสูจน์อนาคตอย่างแน่นอน

นั่นคือสิ่งที่ฉันพกติดตัวไปขณะค้นหาเครื่องมือที่เหมาะสมสำหรับงานนี้โดยเฉพาะ

การเลือกระหว่าง 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 และ เทคโนโลยีใหม่ที่น่าตื่นเต้น. พวกเขาทั้งหมดมีประโยชน์และข้อเสีย ลองมาดูบางสิ่งที่ฉันพิจารณาและทำไม

พื้นที่ เว็บแอนิเมชั่น API เป็นกรณีหนึ่งที่อาจแทนที่ไลบรารีแอนิเมชั่น JavaScript จำนวนมากในอนาคต ด้วยสิ่งนี้ คุณจะสามารถสร้างแอนิเมชั่นที่เซที่ซับซ้อนโดยไม่ต้องโหลดไลบรารีภายนอกใดๆ และด้วยประสิทธิภาพเดียวกันกับแอนิเมชั่น CSS ข้อเสียอย่างเดียวคือ เบราว์เซอร์บางตัวไม่รองรับเลย. 

พื้นที่ <canvas> องค์ประกอบนำเสนอโอกาสที่น่าตื่นเต้นอีกครั้ง ในนั้น เราสามารถเคลื่อนไหวสิ่งต่าง ๆ ด้วย JavaScript ได้ เช่นเดียวกับ DOM แต่แอนิเมชั่นจะแสดงเป็นแรสเตอร์ ซึ่งหมายความว่าเราสามารถสร้างแอนิเมชั่นประสิทธิภาพสูงได้ ข้อเสียเปรียบเพียงอย่างเดียวคือองค์ประกอบผ้าใบถูกแสดงเป็นรูปภาพใน DOM ดังนั้นหากเรากำลังมองหาความสมบูรณ์แบบของพิกเซล เราอาจโชคไม่ดี ในฐานะที่เป็นคนที่เข้ากับการออกแบบได้อย่างลงตัว นี่เป็นตัวทำลายข้อตกลงสำหรับฉัน

ฉันต้องการบางสิ่งที่ได้รับการทดลองและทดสอบ ดังนั้นฉันรู้ว่าฉันอาจต้องใช้ไลบรารี JavaScript อันใดอันหนึ่งที่มีอยู่มากมาย ฉันเริ่มดูห้องสมุดและจำกัดตัวเลือกของฉันให้แคบลง Anime.js และ สกสค. ดูเหมือนว่าทั้งคู่จะจัดการกับอนิเมชั่นที่ซับซ้อนได้ดีและมีบันทึกที่ยอดเยี่ยมเกี่ยวกับประสิทธิภาพ อะนิเมะเป็นห้องสมุดที่ได้รับการดูแลเป็นอย่างดีซึ่งมีดาวมากกว่า 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's 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 อาจซับซ้อนกว่านี้เล็กน้อย ฉันติดอยู่กับไลบรารีที่ยอดเยี่ยมสองแห่งที่มีฟังก์ชันการทำงานที่คล้ายคลึงกันมาก สามารถจัดการกับแอนิเมชั่นที่ซับซ้อน และมีชุมชนที่เจริญรุ่งเรือง ดูเหมือนว่าฉันมีการแข่งขัน!

ลำดับความสำคัญ	อะนิเมะ	สกสค
ภาพเคลื่อนไหวราบรื่น	✅	✅
ประสิทธิภาพ	✅	✅
ความสะดวกสบาย	✅	✅
รองรับเบราว์เซอร์	✅	✅

อะไรทำให้ฉันเลือกห้องสมุดหนึ่งแห่งมากกว่าที่อื่น

ฉันกังวลมากว่าห้องสมุดจะทำตัวอย่างไรภายใต้แรงกดดัน การมีแอนิเมชั่นที่ล้าหลังในเกมอย่าง Solitaire อาจส่งผลต่อความสนุกในการเล่นเกมอย่างมาก ฉันรู้ว่าฉันจะไม่สามารถเห็นได้อย่างครบถ้วนว่าห้องสมุดทำงานอย่างไร ก่อนที่ฉันจะสร้างเกม โชคดีที่ GSAP ได้ทำ การทดสอบความเครียด ที่เปรียบเทียบไลบรารีแอนิเมชั่นต่างๆ เข้าด้วยกัน รวมถึงอนิเมะด้วย

เมื่อพิจารณาแล้ว GSAP น่าจะเป็นไลบรารีที่ยอดเยี่ยมสำหรับจัดการกับแอนิเมชั่นที่ซับซ้อนมากมาย GSAP ให้ฉัน 26 เฟรมต่อวินาทีในแอนิเมชั่นหนักๆ ที่อนิเมะทำได้แค่ 19 เฟรมเท่านั้น หลังจากอ่าน GSAP มากขึ้นและดูในฟอรั่มของพวกเขา ก็เห็นได้ชัดว่าการแสดงมีความสำคัญสูงสุดสำหรับผู้ชาย หลัง GSAP

และแม้ว่าทั้ง GSAP และ Anime จะอยู่มาระยะหนึ่งแล้ว repo ของ Anime ก็อยู่เฉยๆ มาสองสามปีแล้ว ในขณะที่ GSAP ได้ทำข้อตกลงในช่วงสองสามเดือนที่ผ่านมา

ฉันลงเอยด้วยการใช้ GSAP และไม่เสียใจกับการตัดสินใจของฉัน!

แล้วคุณล่ะ สี่เหลี่ยมจัตุรัสนี้มีวิธีการประเมินและเปรียบเทียบเครื่องมือส่วนหน้าหรือไม่ มีลำดับความสำคัญอื่น ๆ ที่คุณอาจพิจารณา (เช่น การช่วยสำหรับการเข้าถึง ฯลฯ) ในโครงการเช่นนี้หรือไม่ หรือคุณมีโครงการที่คุณต้องตัดตัวเลือกของคุณจากตัวเลือกต่างๆ มากมายหรือไม่? กรุณาแบ่งปันในความคิดเห็นเพราะฉันอยากรู้! 

โอ้ และถ้าคุณต้องการดูว่าเมื่อสร้างแอนิเมชั่นการ์ดทั้งสำรับแล้ว ให้ไปที่ไซต์ของฉันและ เล่นเกมโซลิแทร์. มีความสุข!