איך אני יוצר עקומת easing מותאמת אישית cubic-bezier עבור CSS?

גרור את שתי ידיות נקודות הבקרה בגרף, הקלד ערכים מדויקים x1, y1, x2, y2, או בחר הגדרה מראש. לאחר מכן בחר CSS תחת 'פורמט פלט' ולחץ 'העתק' כדי לקבל את ערך ה-cubic-bezier() עבור transition-timing-function.

איך אני יוצר אפקט ניתור או חריגה עם cubic-bezier?

גרור ידית מעל או מתחת לתיבה כך שערך ה-Y שלה יעבור את 0-1. Y יכול לחרוג מטווח זה, בעוד X נשאר בין 0 ל-1. ההגדרות מראש back-out ו-anticipate הן נקודות התחלה מוכנות לחריגה.

האם אני יכול לקבל את ה-easing עבור Tailwind, Framer Motion או anime.js?

כן. לשוניות פורמט הפלט הן CSS, Tailwind, Framer Motion ו-anime.js. כולן מעצבות את אותם ארבעה מספרים, אז בחר לשונית ולחץ 'העתק' כדי לשים את קטע הקוד על הלוח שלך.

איך אני טוען ערך cubic-bezier קיים כדי לערוך אותו?

הדבק ערך כמו cubic-bezier(.17, .67, .83, .67) לתוך תיבת הייבוא ולחץ 'טען'. אם לא ניתן לקרוא ארבעה מספרים, תקבל הודעת שגיאה. העקומה נשמרת גם בכתובת ה-URL של הדף אחרי ה-hash, כך שניתן לשתף אותה.

למה התצוגה המקדימה מרגישה איטית יותר מהמעברים האמיתיים שלי?

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

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

📈

מחולל עיקומי CSS Cubic-Bezier בחינם

עצב עקומות CSS easing על ידי גרירת נקודות בקרה, צפה בתנועה חיה, והעתק את ערך cubic-bezier(). כולל הגדרות מוכנות של overshoot/bounce.

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

פועל לא-מקוון לאחר טעינה

גרור את ידיות הטורקיז והוורוד לעיצוב העקומה

נקודות שליטה

x1y1x2y2

תצוגה מקדימה של תנועה

משך1.6 שנ׳

מעבר רוחב

ערך CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

הגדרות מוכנות

ידיות הוורוד והטורקיז יכולות למשוך מעל או מתחת לתיבה (Y מחוץ ל-0–1) ליצירת אפקטי חריגה/קפיצה כמו back-out ו-anticipate. X נשאר בתוך 0–1 (זמן לא יכול להתהפך).

שימושים נפוצים

CSS המרה מותאמת אישית הנחהעצב הנחה טבעית למשך הצפת השפעות, תפריטים ומעברי ממשק משתמש.
Bounce ו Overshoot Animationsצור תנועת קפיץ/קופץ משעשעת על ידי גרירת נקודות בקרה מעבר לתיבה.
הנחה ל @keyframes Animationsבחר את הפונקציה animation-timing-function הנכונה ל-CSS keyframe animations.
ערכי Easing עבור ספריות אנימציה JSקבל ערכי cubic-bezier עבור GSAP, Framer Motion, anime.js ועוד.
הבן כיצד עובדת הנחהראו את הקשר בין עקומת bezier לתנועה שהיא מייצרת.

כיצד זה עובד

העורך בנוי כולו בדפדפן באמצעות מצב React ו-SVG — אין ספרייה שמטפלת בחשבון העקומה. שתי נקודות בקרה ניתנות לגרירה מגדירות נתיב Bezier מעוקב SVG, ומנוע אנימציית ה-CSS של הדפדפן עצמו מריץ את תצוגת התנועה המקדימה על ידי הזרקת ערך cubic-bezier() המתקבל ישירות לכלל @keyframes.

1
גרור או הקלד נקודות בקרה
שתי ידיות (P1 בטורקיז, P2 בוורוד) יושבות על קנבס SVG. הגרירה משתמשת ב-Pointer Events API עם setPointerCapture כך שהידית עוקבת אחר האצבע או הסמן שלך אפילו מחוץ לגבול ה-SVG. אפשר גם להזיז ידיות במקשי חצים או להקליד ערכים מדויקים לתוך קלטי המספרים x1/y1/x2/y2.
2
SVG מצייר את העקומה בזמן אמת
העקומה היא אלמנט <path> SVG בודד שפקודת ה-C (Bezier מעוקב) שלו מחושבת מחדש מארבעת הקואורדינטות של נקודות הבקרה בכל עדכון מצב. אין קנבס, אין ספרייה חיצונית — מציג ה-SVG של הדפדפן מצייר את הנתיב ישירות.
3
מנוע ה-CSS של הדפדפן מציג תצוגה מקדימה של ה-easing
שלוש אנימציות חיות (נקודה גולשת, מעבר רוחב, וקנה מידה) מריצות @keyframes של CSS עם ערך cubic-bezier() מוזרק inline. מנוע האנימציה של הדפדפן עצמו מפרש את העקומה, כך שמה שאתה רואה זה בדיוק מה שה-CSS בייצור שלך יפיק.
4
העתק את הקטע בתחביר של המסגרת שלך
לשוניות מעצבות את אותם ארבעה מספרים כ-transition-timing-function ב-CSS, כמחלקת ערך שרירותי של Tailwind, כמערך ease של Framer Motion, או כמחרוזת easing של anime.js. הקטע נכתב ללוח עם navigator.clipboard. העקומה מקודדת גם ב-hash של הכתובת (#b=x1,y1,x2,y2) כך שאפשר לשתף או לסמן אותה.