אנחנו שמחים להציג את linear(), פונקציית התאמה ב-CSS שמבצעת אינטרפולציה לינארית בין הנקודות שלה, וכך מאפשרת לך ליצור מחדש אפקטים של עזיבה מהדף הראשון ואפקט קפיצות.
הקלות ב-CSS
כשמוסיפים אנימציה לרכיבים ב-CSS או מעבירים אותם, אפשר לשלוט בקצב שבו ערך משתנה באמצעות פונקציית התאמה, באמצעות המאפיינים animation-timing-function ו-transition-timing-function.
יש כמה מילות מפתח שזמינות כהגדרות קבועות מראש ב-CSS, כלומר linear, ease, ease-in, ease-out ו-ease-in-out. כדי ליצור עקומות התאמה משלכם צריך להשתמש בפונקציה cubic-bezier(), או לנקוט גישה המבוססת על שלבים באמצעות פונקציית ההתאמה steps().
אם משתמשים בה באופן הולם, ההקלות מספקות לרכיב המונפש תחושת משקל כאשר הוא צובר מומנטום.
לא ניתן ליצור עקומות מורכבות, כמו אפקטים של קפיצות או קפיצות, ב-CSS, אבל עכשיו אפשר להעריך אותן בצורה מדהימה, בזכות linear().
מבוא לנושא linear()
תמיכה בדפדפן
- 113
- 113
- 112
- x
דרך חדשה להגדיר התאמה ב-CSS היא באמצעות linear(). הפונקציה הזו מקבלת מספר עצירות, מופרדות בפסיקים. כל עצירה היא מספר בודד שנע בין 0 ל-1. בין כל עצירה, האינטרפולציה מתבצעת בצורה ליניארית, שמסבירה את שם הפונקציה.
animation-timing-function: linear(0, 0.25, 1);
כברירת מחדל, העצירות האלה יפוזרו באופן שווה באופן שווה. בקטע הקוד הקודם, ערך הפלט של 0.25 ישמש בנקודת ה-50%.
בהצגה חזותית, הגרף של linear(0, 0.25, 1) נראה כך:
אם לא רוצים לפזר את העצירות באופן שווה, אפשר לבחור באורך עצירה. כשמעבירים ערך אחד כאורך עצירה, מגדירים את נקודת ההתחלה שלו:
animation-timing-function: linear(0, 0.25 75%, 1);
במקרה הזה, לא ייעשה שימוש בערך הפלט של 0.25 בסימן 50% אלא ב-75%.
כשמציינים שני ערכים כאורך עצירה, מגדירים את נקודת ההתחלה ואת נקודת הסיום שלהם:
animation-timing-function: linear(0, 0.25 25% 75%, 1);
ערך הפלט יהיה בין 0.25 ל-75% בזמן.
יצירת עקומות מורכבות עם linear()
הדוגמאות שלמעלה הן התאמות פשוטות מאוד, אבל אפשר להשתמש ב-linear() כדי ליצור מחדש פונקציות התאמה מורכבות בצורה פשוטה מאוד, עם פגיעה ברמת הדיוק.
נתייחס לעקומה של צמצום העזיבה מהדף הראשון, סוג של התאמה שלא ניתן לבטא ישירות ב-CSS, המוגדרת באמצעות JavaScript:
function easing(pos) {
const t = 7.5625;
const e = 2.75;
return pos < 1 / e
? t * pos * pos
: pos < 2 / e
? t * (pos -= 1.5 / e) * pos + 0.75
: pos < 2.5 / e
? t * (pos -= 2.25 / e) * pos + 0.9375
: t * (pos -= 2.625 / e) * pos + 0.984375;
}
הקוד לא מבטיח הרבה, אבל המחשה חזותית יכולה לעזור. זה הפלט, שמוצג כעקומה כחולה:
ניתן לפשט את העקומה על ידי הוספת עצירות ביניים. כאן, כל נקודה ירוקה מציינת עצירה:
כשמעבירים אותה ל-linear(), התוצאה היא עקומה שנראית כמו המקורית, אבל קצת יותר גס בקצוות.
משווים את התיבה המונפשת הירוקה לתיבה הכחולה כדי להבין שהיא לא חלקה.
עם זאת, אם מוסיפים מספיק עצירות, ניתן להעריך בצורה מדויקת את העקומה המקורית. גרסה מעודכנת:
כבר מתקבלת תוצאה חלקה על ידי הכפלת מספר העצירות.
הקוד שמשמש להנפשה נראה כך:
animation-timing-function: linear(
/* Start to 1st bounce */
0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
/* 1st to 2nd bounce */
0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
/* 2nd to 3rd bounce */
0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
/* 3rd bounce to end */
0.988, 0.984, 0.988, 1
);
כלי שעוזר
היצירה ידנית של רשימת העצירות תהיה מסורבלת מאוד. למרבה המזל, ג'ייק ואדם יצרו כלי שיעזור לכם להמיר את עקומת ההתאמה ל-linear() המקבילה שלה.
הכלי משתמש בפונקציית התאמה של JavaScript או בעקומת SVG כקלט לצורך קלט, ומפיק את העקומה הפשוטה באמצעות linear(). אפשר להשתמש בפסי ההזזה כדי לשלוט במספר העצירות הרצוי ובדיוק שלהן.
בפינה השמאלית העליונה אפשר גם לבחור באחת מההגדרות הקבועות מראש: קפיצות, קפיצות, גומי פשוט או עיצוב חדשני תלת-ממדי מודגש.
תמיכה בכלי פיתוח
בכלי הפיתוח יש תמיכה להצגה ולעריכה של התוצאה של linear(). לחץ על הסמל כדי להציג הסבר קצר אינטראקטיבי שיאפשר לך לגרור בין התחנות.
התכונה הזו של כלי הפיתוח זמינה במשלוחים של כלי הפיתוח ב-Chrome 114.
תמונה מאת האווי מפותון ב-UnFlood