פונקציות טריגונומטריות ב-CSS: מפריסה מעגלית עד אנימציות בלי שורת JavaScript

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

לפני: ימי ה-JavaScript והאבסולוט הקשיח

כדי לחשב מיקום של רכיבים על גבי מעגל בעבר, היינו חייבים לבחור בין שתי רעות:

1. להגדיר מיקומים קשיחים בפיקסלים לכל כפתור בנפרד (אפס גמישות, שובר מובייל).
2. להריץ לולאה ב-JavaScript שמשתמשת ב-Math.sin() ו-Math.cos(), ומזריקה Inline Styles לכל אלמנט ב-DOM.

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

אחרי: מתמטיקה טהורה ישירות ב-CSS

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

הגדרה · CSS Trigonometric Functions

סדרה של פונקציות מתמטיות מובנות ב-CSS (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) המאפשרות לחשב זוויות ומרחקים ישירות בתוך הצהרות סטייל.

הנה איך הטרנספורמציה הזו נראית בפועל:

איך בונים תפריט מעגלי ב-CSS נקי?

הטריק מתחיל בהגדרת שני משתנים בבסיס האלמנטים: מספר הפריטים הכללי (--total), והאינדקס של הפריט הספציפי (--index).

בסך הכל שורה אחת של חישוב זווית:

--angle: calc(360deg / var(--total) * var(--index));

מכאן, גזירת קואורדינטות X ו-Y היא משחק ילדים:

--x: calc(cos(var(--angle)) * var(--radius));
--y: calc(sin(var(--angle)) * var(--radius));

מציבים את הנתונים ב-transform: translate(var(--x), var(--y)) והאלמנט קופץ בדיוק למקום שלו בסיבוב המעגל.

💡

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

גלים ואפקטים בתנועה ללא ספריות חיצוניות

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

במקום ליצור פראמציות מורכבות עבור גל טקסט או כדורים מקפצים, אפשר להשתמש ב-sin() בתוך הלולאה. הסינוס מייצר התנהגות מתונה בקצוות, בדיוק כמו תנועת מטוטלת בעולם האמיתי.

סיכום

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

תבדקו את הקוד שלכם. אם יש לכם חישובי מיקום ב-JavaScript — זה הזמן לנקות אותם.