มีไลบรารี CSS และ JavaScript มากมายสำหรับไลบรารีแอนิเมชั่น อันที่จริงแล้ว การเลือกสิ่งที่ถูกต้องสำหรับโครงการของคุณอาจดูเหมือนเป็นไปไม่ได้ นั่นคือสถานการณ์ที่ฉันเผชิญเมื่อตัดสินใจสร้าง เกมเล่นไพ่คนเดียวออนไลน์. ฉันรู้ว่าฉันต้องการไลบรารีแอนิเมชั่น แต่จะเลือกอันไหนดี?
ในบทความนี้ ฉันจะพิจารณาถึงสิ่งที่ควรพิจารณา สิ่งที่ควรระวัง และนำเสนอไลบรารียอดนิยมบางส่วนที่มีให้คุณ ฉันจะยกตัวอย่างในโลกแห่งความเป็นจริงกับคุณเพื่อแสดงประเด็นของฉัน และในท้ายที่สุด หวังว่าคุณจะพร้อมกว่าฉันเมื่อฉันต้องเลือกไลบรารีแอนิเมชั่นเป็นครั้งแรก
ระยะทางของคุณกับคำแนะนำนี้อาจแตกต่างกันไปแน่นอน ทุกสิ่งที่ฉันแบ่งปันที่นี่มีความเฉพาะเจาะจงกับสิ่งที่ฉันอยากจะสร้าง โครงการของคุณอาจมีข้อกำหนดและลำดับความสำคัญที่แตกต่างกันโดยสิ้นเชิง ไม่เป็นไร ฉันคิดว่าสิ่งที่สำคัญที่นี่คือการได้รับบัญชีโดยตรงของ คิดเหมือนนักพัฒนา front-end โดยมีเป้าหมายเฉพาะ
ฉันคิดว่าตัวเองเป็นนักพัฒนา front-end แต่พื้นหลังของฉันนั้นหนักมากในด้านการออกแบบ ดังนั้นฉันรู้รหัส แต่ไม่ใช่คนที่เป็นวิศวกร JavaScript เพียงต้องการชี้แจงว่าเนื่องจากประสบการณ์สามารถส่งผลต่อการตัดสินใจขั้นสุดท้ายได้อย่างแน่นอน
นี่แหละเป้าหมาย
ก่อนที่เราจะเข้าสู่การตัดสินใจใดๆ มาดูแอนิเมชั่นประเภทต่างๆ ที่ฉันต้องทำในเกมเวอร์ชันแก้ไข CSS-Tricks:
@media (ความกว้างสูงสุด: 800px) {
#solitaire_embed > div {
padding-ด้านล่าง: 90% !สำคัญ; /* เปลี่ยนสัดส่วนภาพบนมือถือ */
}
}
@media (ความกว้างสูงสุด: 568px) {
#solitaire_embed > div {
padding-ด้านล่าง: 100% !สำคัญ; /* เปลี่ยนสัดส่วนภาพบนมือถือ */
}
}
@media (ความกว้างสูงสุด: 414px) {
#solitaire_embed > div {
padding-ด้านล่าง: 120% !สำคัญ; /* เปลี่ยนสัดส่วนภาพบนมือถือ */
}
}
สวยหวานใช่มั้ย? แอนิเมชั่นเหล่านี้ไม่มีเรื่องเล็กน้อย มีหลายสิ่งหลายอย่างเกิดขึ้น—บางครั้งพร้อมกัน—และยังมีอีกมากที่ต้องเตรียมการ นอกจากนี้ แอนิเมชั่นส่วนใหญ่ยังถูกกระตุ้นจากการโต้ตอบของผู้ใช้ นั่นทำให้ฉันมีลำดับความสำคัญบางประการในการตัดสินใจของฉัน:
- ภาพเคลื่อนไหวที่ราบรื่น: วิธีการใช้แอนิเมชั่นสามารถมีผลกระทบอย่างมากต่อการทำงานอย่างราบรื่นหรือแสดงอาการกระตุกเล็กน้อย
- ประสิทธิภาพ: การนำไลบรารี่มาใช้จะเพิ่มน้ำหนักให้กับโปรเจ็กต์ และฉันต้องการให้เกมของฉันมีความบางที่สุดเท่าที่จะเป็นไปได้
- สะดวก: ฉันต้องการรูปแบบที่ดีและสะอาดตาที่ช่วยให้เขียนและจัดการแอนิเมชั่นได้ง่ายขึ้น ฉันยังต้องการแลกความสะดวกสบายเพิ่มเติมเล็กน้อยด้วยค่าใช้จ่ายด้านประสิทธิภาพเพียงเล็กน้อย ถ้ามันช่วยให้ฉันเขียนโค้ดที่ดีขึ้นและบำรุงรักษาได้มากขึ้น อีกครั้งนี้เป็นลางดีสำหรับนักออกแบบที่หันมาพัฒนา
- การสนับสนุนเบราว์เซอร์: แน่นอน ฉันต้องการให้เกมของฉันทำงานบนเบราว์เซอร์รุ่นใหม่ๆ โดยใช้รูปแบบการเพิ่มประสิทธิภาพแบบก้าวหน้าเพื่อป้องกันไม่ให้เบราว์เซอร์รุ่นเก่าทำงานจนหมด นอกจากนี้ฉันต้องการการพิสูจน์อนาคตอย่างแน่นอน
นั่นคือสิ่งที่ฉันพกติดตัวไปขณะค้นหาเครื่องมือที่เหมาะสมสำหรับงานนี้โดยเฉพาะ
การเลือกระหว่าง 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 และไม่เสียใจกับการตัดสินใจของฉัน!
แล้วคุณล่ะ สี่เหลี่ยมจัตุรัสนี้มีวิธีการประเมินและเปรียบเทียบเครื่องมือส่วนหน้าหรือไม่ มีลำดับความสำคัญอื่น ๆ ที่คุณอาจพิจารณา (เช่น การช่วยสำหรับการเข้าถึง ฯลฯ) ในโครงการเช่นนี้หรือไม่ หรือคุณมีโครงการที่คุณต้องตัดตัวเลือกของคุณจากตัวเลือกต่างๆ มากมายหรือไม่? กรุณาแบ่งปันในความคิดเห็นเพราะฉันอยากรู้!
โอ้ และถ้าคุณต้องการดูว่าเมื่อสร้างแอนิเมชั่นการ์ดทั้งสำรับแล้ว ให้ไปที่ไซต์ของฉันและ เล่นเกมโซลิแทร์. มีความสุข!