הנקודות החשובות
- 01גרור שתי ידיות של נקודה בקרה כדי פסל את easing עקומה בצורה חזותית ולא ניחוש ערכים מספר.
- 02כדור בחיים תנועה משחק חזרה את הזמן כדי אתה יכול להרגיש את התנועה לפני committing ל-זה.
- 03כל חמש CSS בנוי עיצוב טבלי (ease, ליניארית, ease-בתוך, ease-בחוץ, ease-בתוך-בחוץ) זמינים כמו התחלה נקודות.
- 04ה-cubic-bezier() ערך מתעדכן בחיים עם שתי-עשרוני דיוק, מוכן כדי הדבק לתוך כל CSS קניין.
למה כמתים Easing עקומות משנה עבור UI תנועה
CSS בנוי זמן פונקציות - ease, ease-בתוך-בחוץ, ליניארית - כיסוי הרבה קרקע, אבל כל UI יש רגעים איפה ברירת המחדל מרגיש קצת לא נכון. כלים שמופיע יותר מדי snappily, modal שמופיע יתר על המידה בתוך פתיחה, התקדמות בר שמרגיש מכני. Cubic-bezier עקומות מאפשר לך כדי טיול תנועה כדי להרגיש טבעי ולא מכני, אבל ארבע מספרים בתוך cubic-bezier(0.4, 0, 0.2, 1) הם כמעט בלתי אפשרי כדי התיחס ישירות.
עורך cubic-bezier של Handytool הפוך אלה מספרים לתוך עקומה חזותית עם שתי ידיות draggable. הזז ידית וכדור תנועה משחק חזרה באופן מיידי, כדי אתה יכול לתשובה בתוך חדש עד התנועה תואם כוונתך. אז העתק את ערך וירידה את זה לתוך CSS שלך - בוצע.
כיצד כדי עיצוב CSS Easing עקומה
- 01
התחל מ-עיצוב טבלי
בחר ease, ליניארית, ease-בתוך, ease-בחוץ, או ease-בתוך-בחוץ כמו בסיס. ידיות כדור ל-נקוד נכון עבור כל עיצוב.
- 02
גרור את ידיות נקודה בקרה
כל ידית בקרה קצה אחד של עקומה - ידית התחלה צורות ההאצה ראשוני, ידית קצה צורות ההאטה סופי. הזז ידית מתגי עיצוב כדי 'כמתים' באופן אוטומטי.
- 03
צפה כדור תנועה
כדור מופע מ-שמאל כדי ימין באמצעות עקומה שלך. כיוונן משך slider כדי תצוגה מקדימה איטי לעומת מהיר transitions.
- 04
ניסוי עם overshoot
גרור ידית Y-ציר מעל 1 או מתחת 0 כדי יצור overshoot ו-undershoot - ה-'bouncy' השפעה שעושה תיבה תפריט פתוח energetically.
- 05
העתק את CSS ערך
לחץ על Copy כדי תפיסה את cubic-bezier() מחרוזת והדבק את זה לתוך transition-timing-function או animation-timing-function בתוך stylesheet שלך.
פועל לחלוטין בתוך הדפדפן שלך
עורך הוא גדול בעצמו כלי ברכב - לא גופנים, לא סקריפטים, וללא נתונים נטענים לאחר דף פתוח. גרירה ידיות ותצוגה מקדימה תנועות עבודה offline. ה-cubic-bezier נוסחה שימושית עבור כדור תצוגה מקדימה היא אותו ברכבים השתמש לעבור CSS transitions, כדי מה אתה לצפות בתוך עורך הוא בדיוק מה stylesheet שלך יוצר.
יש דבר כדי התקין ודבר כדי רישום ל-. פלט הוא CSS ערך יחיד - הדבק את זה והיית בוצע.
Cubic-Bezier Editor FAQ
מה זה cubic-bezier easing עקומה?
זה מתמטי עקומה מוגדר על ידי שתי נקודות בקרה כי זה כדי איך CSS transition או תנועה האצה על פני זמן. ארבע מספרים בתוך cubic-bezier(x1, y1, x2, y2) קבע מיקום של אלה נקודות בקרה.
למה Y ערכים יכולים ללכת מעל 1 או מתחת 0?
Y ערכים מחוץ 0–1 יוד overshoot וundershoot - עקומה עומדת עבר קצה לפני התשמר. זה יוד 'bouncy' easing עקומות. ה-X ערכים חייבים להישאר בתוך 0–1.
איך אני השתמש הפלט?
העתק את cubic-bezier(...) מחרוזת והדבק את זה לתוך כל CSS transition-timing-function או animation-timing-function ערך. זה עבודה בתוך כל ברכב מודרני.
מה עושה ease-בתוך-בחוץ בפועל אומר?
Ease-בתוך-בחוץ התחלות איטי, מהפכות בתוך האמצע, וmassages בתוך סוף - cubic-bezier(0.42, 0, 0.58, 1). זה משקף איך אובייקטים בפועל מאיצים ומאטים וזה ברירת המחדל בחירה עבור רוב polished UI תנועה.
האם כדור תנועה תצוגה מקדימה דיוק CSS?
כן - תצוגה מקדימה משתמש אותו cubic bezier נוסחה ברכבים חל CSS transitions. משך slider מאפשר לך להרגיש איטי לעומת מהיר עקומות לפני committing.