מחולל Cubic-Bezier Easing

מה זה מחולל easing מסוג cubic-bezier?

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

ארבעת המספרים האלה הם הקואורדינטות של שתי נקודות בקרה (x1, y1, x2, y2). קשה לכתוב אותם ידנית, כי שינויים זעירים משפיעים מאוד על המראה, וחריגות קטנות יוצרות תנועה *קופצנית* שאי אפשר לראות מהמספרים בלבד. עורך ויזואלי מאפשר לגרור את הידיות ולראות את העקומה מגיבה, וזה הרבה יותר מהיר מכיוונון של שברים עשרוניים.

העורך של Coddy משרטט את העקומה בזמן אמת, מנפיש כדור תצוגה לפי ה-easing שבחרתם ומציע תבניות מוכנות לדפוסים נפוצים: מילות המפתח של CSS, העקומה הסטנדרטית של Material Design, יציאה קופצנית ועקומת anticipate עם חריגה. העתיקו את מחרוזת cubic-bezier() שנוצרה והדביקו אותה ב-CSS שלכם. הכול רץ בדפדפן בלבד.

מה כדאי לדעת על easing מסוג cubic-bezier

• העקומה מציגה *התקדמות* כפונקציה של *זמן*. הזמן נע משמאל לימין (0 → 1), וההתקדמות מלמטה למעלה (0 → 1). אלכסון ישר הוא linear: התקדמות שווה בכל יחידת זמן.
• קואורדינטות ה-X של שתי נקודות הבקרה מוגבלות לטווח 0..1. קואורדינטות ה-Y יכולות לרדת מתחת ל-0 או לעלות מעל 1, וכך מקבלים easing קופצני, anticipate ו-overshoot (האנימציה חורגת לרגע מהיעד או מתחילה בכיוון ההפוך).
• עקומות *Ease-out* (רוב ההתקדמות קורית בהתחלה) מרגישות מגיבות וחדות, ומתאימות לכניסות ולתגובות של כפתורים. עקומות *Ease-in* (ההתקדמות קורית בסוף) מרגישות איטיות: בדרך כלל לא מתאימות לממשק, אבל שימושיות ליציאות.
• ה-easing ה*סטנדרטי* ש-Material Design ממליצה עליו הוא cubic-bezier(0.4, 0, 0.2, 1): התחלה מהירה, סיום איטי. iOS משתמשת במשהו קרוב ל-cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out).
• באנימציות קצרות (≤200ms) רוב סוגי ה-easing נראים דומים, והמשך חשוב יותר מהעקומה. באנימציות ארוכות יותר (300ms ומעלה), ה-easing הוא מה שגורם לתנועה להרגיש מלוטשת או מרושלת.

איך לעצב easing מסוג cubic-bezier

1. 1

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

   לחצו על תבנית שקרובה לתחושה שאתם מחפשים. *Material standard* ו-*Bouncy out* הן נקודות פתיחה טובות לתנועה בממשק, ו-*ease-out* היא ברירת המחדל הבטוחה לאנימציות כניסה.

2. 2

   גררו את שתי הידיות

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

3. 3

   בחרו משך והפעילו שוב

   בחרו משך מציאותי לאנימציה האמיתית שלכם. מעברים בממשק נמשכים בדרך כלל 150 עד 300ms, ותנועות הדגשה 400 עד 600ms. לחצו על *הפעלה חוזרת* כדי להריץ שוב את התצוגה במשך החדש.

4. 4

   כוונון מדויק בשדות המספרים

   לערכים מדויקים, הקלידו בשדות X1/Y1/X2/Y2 שמתחת לעקומה. Y יכול לרדת מתחת ל-0 או לעלות מעל 1, ו-X תמיד בטווח 0..1.

5. 5

   העתיקו את ה-CSS

   לחצו על *העתקה* כדי לקבל את כלל ה-transition המלא. הדביקו אותו בגיליון הסגנונות והחליפו את transform במאפיין שאתם מנפישים.

טבלת עזר ל-cubic-bezier

סוגי easing נפוצים וערכי ה-cubic-bezier שמאחוריהם. כל ארבע מילות המפתח שלמטה הן כינויים לעקומות cubic-bezier מסוימות.

דוגמאות cubic-bezier לנסות

.btn {    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover {    transform: translateY(-2px);}

.card {    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}

.hero {    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}

טעויות easing נפוצות

• שימוש ב-ease-in לאנימציות כניסה. הוא מתחיל לאט ומסיים מהר, ההפך ממה שמרגיש מגיב. השתמשו ב-ease-out במקום.
• בחירה ב-linear לתנועה בממשק כי הוא נראה ניטרלי. תנועה במהירות קבועה נראית מכנית. היא נכונה לפסי התקדמות ולספינרים, אבל כמעט לא לשום דבר אחר.
• הגזמה עם חריגה בכל מעבר. easing קופצני הוא הדגשה, לא ברירת מחדל: כשמשתמשים בו בכל מקום, התוצאה נראית כמו כאוס.
• ניסיון לתקן תנועה שמרגישה איטית על ידי שינוי ה-easing במקום המשך. אם ease-out של 600ms מרגיש איטי, נסו קודם 300ms.
• שכחה שקואורדינטות ה-X של שתי הידיות מוגבלות לטווח 0..1. ניסיון לגרור ידית אל מחוץ לצד השמאלי או הימני של הקנבס לא עושה כלום: רק Y יכול לצאת מגבולות התיבה.

שאלות נפוצות על Cubic-Bezier