יצירת עקומות אנימציה מורכבות ב-CSS באמצעות פונקציית ההתאמה linear()

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

Bramus

תנועה חלקה ב-CSS

כשמוסיפים אנימציה של רכיבים או מעבירים אותם ב-CSS, אפשר לקבוע את הקצב שבו ערך משתנה באמצעות פונקציית התאמה אישית באמצעות המאפיינים animation-timing-function ו-transition-timing-function.

יש כמה מילות מפתח שזמינות כהגדרות קבועות מראש ב-CSS: linear, ease, ease-in, ease-out ו-ease-in-out. כדי ליצור עקומות התאמה משלכם, צריך להשתמש בפונקציה cubic-bezier() או לנקוט גישה מבוססת-צעדים באמצעות פונקציית ההתאמה של steps().

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

אי אפשר ליצור עקומות מורכבות כמו אפקטים של קפיצה או קפיץ ב-CSS, אבל עכשיו אפשר להתקרב אליהן בצורה מדהימה בזכות linear().

מבוא ל-linear()

דרך חדשה להגדיר התאמה ב-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 ישמש מ-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
);

כלי שיעזור לכם

יצירת רשימת התחנות הזו באופן ידני תהיה מאוד מסורבלת. למזלכם, Jake ו-Adam יצרו כלי שעוזר להמיר עקומת האטה ל-linear() המקבילה שלה.

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

בפינה השמאלית העליונה, אפשר גם לבחור באחת מההגדרות הקבועות מראש: Spring,‏ Bounce,‏ Simple elastic או Material Design emphasized easing.

תמיכה ב-DevTools

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

התכונה הזו של DevTools זמינה ב-DevTools ששולחים עם Chrome 114.

תמונה של Howie Mapson ב-Unsplash