יצירת עקומות אנימציה מורכבות ב-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: אנימציות

.

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

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

היכרות עם linear()

תמיכה בדפדפן

• 113
• 113
• 112
• 17.2

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

כלי שעוזר

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

צילום מסך של https://linear-easing-generator.netlify.app/ בפעולה.

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

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

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

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

צילום מסך של העורך 'לינארי() ' בכלי הפיתוח ל-Chrome.

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

תמונה מאת האווי מפותון ב-Unbounce