איך בחרתי ספריית אנימציה למשחק הסוליטייר שלי

יש שפע של ספריות CSS ו-JavaScript עבור ספריות אנימציה בחוץ. כל כך הרבה, למעשה, שבחירה נכונה עבור הפרויקט שלך יכולה להיראות בלתי אפשרית. זה המצב שעמד בפניי כשהחלטתי לבנות א משחק סוליטר מקוון. ידעתי שאזדקק לספריית אנימציה, אבל מה היה הנכון לבחור?

במאמר זה אעבור על אילו שיקולים עשיתי, ממה להיזהר ואציג בפניכם כמה מהספריות הפופולריות ביותר שיש. אני אעבור איתך על כמה דוגמאות מהעולם האמיתי כדי להמחיש את הנקודות שלי, ובסופו של דבר, אני מקווה, אתה תהיה מצויד יותר ממני כשהייתי צריך לבחור ספריית אנימציה לראשונה.

הקילומטראז' שלך עם העצה הזו עשוי להשתנות, כמובן. כל מה שאני משתף כאן הוא ספציפי לדבר שרציתי לבנות. לפרויקט שלך עשויים להיות דרישות וסדרי עדיפויות שונים לחלוטין וזה בסדר. אני חושב שמה שחשוב כאן הוא לקבל דיווח ממקור ראשון חושב כמו מפתח קצה עם מטרה מסוימת.

אם כבר מדברים על זה, אני כן מחשיב את עצמי כמפתח חזיתי אבל הרקע שלי סופר כבד בעיצוב. אז אני יודע קוד, אבל לא במידה של מישהו שהוא מהנדס JavaScript. רק רציתי להבהיר את זה כי הניסיון בהחלט יכול להשפיע על ההחלטה הסופית.

הנה המטרה

לפני שניכנס לכל קבלת החלטות, בואו נסתכל על סוגי האנימציות שהייתי צריך לעשות בגרסה הזו של המשחק המותאמת ל-CSS-Tricks:

די מתוק, נכון? אין שום דבר טריוויאלי באנימציות האלה. יש הרבה מה שקורה - לפעמים בו זמנית - והרבה לתזמר. בנוסף, רוב האנימציות מופעלות על ידי אינטראקציות של משתמשים. אז, זה השאיר לי כמה סדרי עדיפויות לקראת ההחלטה שלי:

• אנימציות חלקות: לאופן שבו האנימציות מיושמות יכולה להיות השפעה גדולה אם הן פועלות בצורה חלקה, או אם הן מציגות מעט חתיכות.
• ביצועים: אימוץ כל ספרייה הולך להוסיף משקל לפרויקט ורציתי שהמשחק שלי יהיה רזה ככל האפשר.
• נוֹחוּת: רציתי תחביר יפה ונקי שיקל על הכתיבה והניהול של האנימציות. אפילו הייתי מחליף קצת נוחות נוספת תמורת עלות ביצועים קטנה אם זה יאפשר לי לכתוב קוד טוב יותר וניתן לתחזוקה יותר. שוב, זה מבשר טובות עבור מעצב שהפך למפתח.
• תמיכה בדפדפן: כמובן שרציתי שהמשחק שלי יעבוד על כל דפדפן מודרני באמצעות צורה כלשהי של שיפור מתקדם כדי למנוע דפדפנים מדור קודם. בנוסף, בהחלט רציתי הגנת עתיד.

זה מה שלקחתי איתי כשחיפשתי את הכלי המתאים לעבודה הספציפית הזו.

בחירה בין CSS או JavaScript ספריות אנימציה

הדבר הראשון ששקלתי בבחירת ספריית אנימציה היה האם ללכת עם ספרייה מבוססת CSS או JavaScript. יש הרבה ספריות CSS נהדרות, רבים מהם עם ביצועים מצוינים שהיו בעדיפות גבוהה עבורי. חיפשתי לעשות כמה אנימציות כבדות משקל, כמו היכולת לרצף אנימציות ולקבל התקשרות עם השלמת האנימציה. כל זה אפשרי לחלוטין עם CSS טהור - עדיין, זה הרבה פחות חלק ממה שרוב ספריות JavaScript מציעות.

בואו נראה איך נראית אנימציה פשוטה ברצף ב-CSS ונשווה אותה ל-jQuery, שיש לה המון עוזרי אנימציה מובנים:

האנימציות נראות אותו הדבר אבל נוצרות אחרת. כדי ליצור את הנפשת CSS, ראשית, עלינו להגדיר את הנפשת ה-keyframe ב-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 היא הדרך הנכונה ללכת, אבל איזו היא הנכונה לבחור עבור משחק הסוליטייר שלי? כלומר, jQuery הוא נהדר ו עדיין בשימוש נרחב גם היום, אבל זה לא משהו שאני רוצה לתלות עליו את הכובע. יש הרבה ספריות אנימציה של JavaScript, אז רציתי לשקול משהו שנבנה במיוחד כדי להתמודד עם סוג האנימציות הכבדות שחשבתי.

בחירת ספריית אנימציה של JavaScript

מהר מאוד התברר לי שלא חסרות ספריות אנימציה של JavaScript ו טכנולוגיות חדשות ומרגשות. לכולם יש יתרונות וחסרונות, אז בואו נעבור על כמה מהדברים ששקלתי עליהם ולמה.

השמיים API של אנימציות אינטרנט הוא מקרה כזה שעשוי להחליף ספריות אנימציה רבות של JavaScript בעתיד. בעזרתו, תוכל ליצור אנימציות מדורגות מורכבות מבלי לטעון ספריות חיצוניות כלשהן ועם אותם ביצועים כמו אנימציות CSS. החיסרון היחיד הוא זה עדיין לא כל הדפדפנים תומכים בזה. 

השמיים <canvas> אלמנט מציג הזדמנות מרגשת נוספת. בו, אנחנו יכולים להנפיש דברים עם JavaScript, כפי שהיינו עושים עם ה-DOM, אבל האנימציה מוצגת כרסטר, מה שאומר שאנחנו יכולים ליצור כמה אנימציות בעלות ביצועים גבוהים. החיסרון היחיד הוא שאלמנט הקנבס מוצג בעצם כתמונה ב-DOM, כך שאם אנחנו מחפשים שלמות פיקסלים, אולי אין לנו מזל. בתור מישהו שמתאים מאוד לעיצוב, זה היה שובר עסקות עבורי.

הייתי צריך משהו שנוסה ונבדק, אז ידעתי שאני כנראה צריך ללכת עם אחת מספריות JavaScript הרבות. התחלתי להסתכל על ספריות וצמצמתי את הבחירות שלי ל 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() פונקציה מגיע מובנה עם callbacks על התחלת וסיום האנימציה, ויצירת הרצף קלה כמו הוספת האנימציות ברצף. ראשית, אני מזיז את הכרטיס, אחר כך אני מסובב את התמונה האחורית שלי ב-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
})

זמן ההחלטה

נראה שההבדל העיקרי בין אנימה ל-GSAP הוא התחביר, שבו GSAP עשוי להיות קצת יותר משוכלל. נתקעתי עם שתי ספריות נהדרות שהיו להן פונקציונליות מאוד דומה, היו מסוגלות להתמודד עם אנימציה מורכבת והייתה לה קהילה משגשגת. זה נראה כאילו היה לי מירוץ תיקו!

עדיפות	אנימה	GSAP
אנימציות חלקות	✅	✅
ביצוע	✅	✅
נוחות	✅	✅
תמיכת דפדפן	✅	✅

אז מה גרם לי לבחור בספרייה אחת על פני השנייה?

הייתי מודאג מאוד מהאופן שבו הספרייה תפעל תחת לחץ. הנפשה לאחור במשחק כמו סוליטייר יכולה להשפיע מאוד על כמה כיף לשחק במשחק. ידעתי שלא אוכל לראות באופן מלא את ביצועי הספרייה לפני שיצרתי את המשחק. למרבה המזל, GSAP עשתה א מבחן מאמץ שהשוו ספריות אנימציה שונות זו לזו, כולל אנימה.

כשמסתכלים על זה, GSAP בהחלט נראתה כספרייה מעולה להתמודדות עם המון אנימציות מורכבות. GSAP נתן לי למעלה מ-26 פריימים לשנייה באנימציה כבדה ש-Anime הצליחה להעלות אותה רק בגיל 19. לאחר שקראתי יותר על GSAP ובדקתי את הפורומים שלהם, התברר שהביצועים היו בעדיפות הגבוהה ביותר עבור החבר'ה מאחורי GSAP.

ולמרות שגם GSAP וגם אנימה היו בסביבה זמן מה, הריפו של אנימה נשאר קצת רדום כמה שנים בזמן ש-GSAP ביצעה התחייבויות בחודשיים האחרונים.

בסופו של דבר השתמשתי ב-GSAP ולא התחרטתי על החלטתי!

מה איתך? האם כל זה מסתדר עם האופן שבו אתה מעריך ומשווה כלי עבודה קדמיים? האם יש סדרי עדיפויות אחרים שאולי שקלת (למשל נגישות וכו') בפרויקט כזה? או שיש לך פרויקט שבו היית צריך לפרגן את הבחירות שלך מתוך שלל אפשרויות שונות? אנא שתפו בתגובות כי אני רוצה לדעת! 

אה, ואם אתה רוצה לראות איך זה נראה בעת הנפשה של חפיסת קלפים שלמה, אתה יכול לגשת לאתר שלי לשחק משחק סוליטר. תעשה חיים!