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

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

Bramus

פונקציות האצה ב-CSS

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

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

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

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

מבוא ל-linear()

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

קחו לדוגמה את עקומת ההאצה וההאטה של קפיצה, סוג של האצה והאטה שלא ניתן להגדיר ישירות ב-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 easing או עקומת SVG, ומחזיר את העקומה המפושטת באמצעות linear(). משתמשים במחוונים כדי לשלוט במספר התחנות שרוצים, ובדיוק שלהן.

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

תמיכה בכלי הפיתוח

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

התכונה הזו בכלי הפיתוח זמינה בכלי הפיתוח מגרסה 114 של Chrome.