מחולל Cubic Bezier

להקליד cubic-bezier(x1, y1, x2, y2) ידנית ולרענן את הדף כדי לבדוק את התחושה היא דרך איטית לכוונן אנימציה. מחולל זה סוגר את הלולאה הזו: גררו כל ידית נקודת בקרה על העקומה, או הקלידו מספרים מדויקים לשדות x1/y1/x2/y2, והעקומה, מחרוזת ה-CSS הניתנת להעתקה והתצוגה המקדימה המונפשת מתעדכנים בכל שינוי — בלי שלב build, בלי רענון.

שני הצירים פועלים באופן שונה במכוון. x1 ו-x2 נשארים תחומים בין 0 ל-1, כי זה מה שמפרט ה-CSS באמת דורש מפונקציית timing של cubic-bezier() — ערך מחוץ לטווח זה פשוט אינו תקין. ל-y1 ול-y2 אין מגבלה כזו: גררו ידית מעל לחלק העליון של התיבה או מתחת לתחתית, והעקומה חורגת מעבר להתחלה או לסוף שלה, ובדיוק כך בונים אפקטים של קפיץ או ניתור מעקומת איזינג בודדת.

לראות מספר זה לא אותו דבר כמו לראות את התנועה, ולכן התצוגה המקדימה מריצה שני כדורים זהים זה לצד זה בלולאה: אחד נע באמצעות העקומה המותאמת שלכם, והשני נע בקצב ליניארי קבוע. לצפות בהם מתחרים זו הדרך המהירה ביותר לדעת אם עקומת איזינג באמת מייצרת את התחושה שאתם רוצים, לפני שהיא מגיעה אי פעם לגיליון סגנונות. דפי ההגדרות הקבועות מראש — המספרים האמיתיים מאחורי מילת המפתח ease-in-out של CSS, קירוב חריגה כן שחלק מכנים ניתור, והעקומה הסטנדרטית של Material Design מבית Google — הם נקודות התחלה מוכנות שמהן אפשר לגרור, במקום להתחיל מנקודות בקרה ריקות.

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