אנימציות ובעיות ביצועים

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

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

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

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

אז להלן כמה דברים שכדאי להכיר:

requestAnimationFrame

מפרט W3C המנסה לשפר את ביצועי האנימציה שלנו על ידי סנכרון טוב יותר עם קצב הפריימים של הדפדפן. לקריאה נוספת: כאן וכאן.

למה זה טוב יותר?

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

ויש גם polyfill לתמיכה בדפדפנים ישנים.

אם יש לכם כבר אנימציה בעייתית ואתם לא רוצים לכתוב אותה מחדש תוכלו להשתמש בפלאגין jQuery requestAnimationFrame שמחליף את הפונקציה של jQuery ב requestAnimationFrame.

GreenSock Animation Platform (GSAP)

פלטפורמת אנימציה מבוססת JS חדשה יותר ומהירה הרבה יותר מjQuery.

GSAP לא תלויה בספריות אחרות אבל אם נוח לכם יותר לפתח עם jQuery או שיש לכם פרויקט שכבר עובד, תוכלו להשתמש בפלאגין jquery.gsap. התוסף משתלט על האנימציות ומחליף את הפונקציה הרגילה jQuery.animate() בכלים ובפונקציות של GSAP במינימום עבודה וזמן.

למה זה טוב יותר?

1. פלטפורמה ייחודית המתמקדת רק באנימציה
2. הדיווחים מדברים על ביצועים טובים יותר מjQuery בכ20%.
3. ניתן לבצע הרבה יותר דברים והרבה יותר בקלות לאחר שלומדים להשתמש בפלטפורמה.

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