CSS3 אנימציה - יצירת אוהד עם אפס להקפיץ באמצעות עקומה Bezier

האם ידעת ש טרנספורמציות גיאומטריות נוסף אל רכיבי HTML עם שינוי צורהמאפיין CSS כגון קנה מידה, הטיה וסיבוב יכולים להיות מונפשים? הם יכולים להיות אנימציה באמצעות המעבר רכוש ו @keyframes אנימציות, אבל מה אפילו קריר יותר הוא כי טרנספורמציות אנימציה ניתן לנקוט חריץ עם תוספת של קצת אפקט להקפיץ, משתמש ב cubic-bezier () פונקציית תזמון.

בקצור נמרץ, cubic-bezier () (ב- CSS) הוא פונקציית תזמון למעברים. הוא מציין את המהירות של המעבר, בין היתר, ניתן להשתמש בו גם ליצור אפקט מקפץ אנימציות.

בהודעה זו, תחילה אנחנו הולכים ליצור אנימציה טרנספורמציה פשוטה שאליו אנו מאוחר יותר הוסף cubic-bezier () פונקציית תזמון. בסוף זה הדרכה, תוכל להבין כיצד ליצור אנימציה המשתמשת הן מאוורר החוצה אפקט להקפיץ. הנה התוצאה הסופית (לחץ כדי לראות אפקט).

ההדגמה היא בהשראת זה יפה Dribbble ירו על ידי כריסטופר ג 'ונס על מיקום מיקום אנימציה.

1. יצירת העלים

הצורה של סמן המיקום מורכבת מחמישה (נקרא להם) עלים. כדי ליצור את בצורת אליפסה של עלה, בוא נשתמש רדיוס הגבול מאפיין CSS. ה רדיוס הגבול של פינה אחת היא המורכב משני רדיוסים, אופקי ואנכי, כמוצג להלן.

ה רדיוס הגבול רכוש יש תחביר שונים. נשתמש בצורה מסובכת יותר עבור צורת הסמן:

 border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

בתחביר זה, רדיוס אופקי ואנכי מקובצים יחד; ח & v מייצגים רדיוס אופקי ואנכי, ו t, l, .ב & ייצור מייצגים פינות עליון, שמאלי, תחתון וימני. לדוגמה, vbl מייצג רדיוס אנכי של הפינה השמאלית התחתונה.

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

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

ה רדיוס אנכי של פינה השמאלית העליונה בפינה הימנית העליונה יהיה 30%, בעוד בפינה השמאלית התחתונה ופינות הימנית התחתונה ישתמשו 70% ערך.

HTML

CSS

.pinStarLeaf width: 60px; גובה: 120px; הגבול-רדיוס: 50% / 30% 30% 70% 70%; צבע רקע: # B8F0F5; 

2. הכפלת העלים

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

HTML

CSS

#pinStarWrapper width: 300px; גובה: 300px; מקומות קרובים  .pinStarLeaf width: 60px; גובה: 120px; תפקיד מוחלט הגבול-רדיוס: 50% / 30% 30% 70% 70%; משמאל: 0; .. you top you01; bottom: 0; margin: auto; אטימות: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth of of type (5) background-color: # F3EDA2;  

3. לכידת אירוע לחץ & שיפור אסתטיקה

ללא שם: בואו הוסף תיבת סימון עם ה #pinStarCenterChkBox מזהה כדי ללכוד את האירוע לחץ. כאשר תיבת הסימון מסומנת, העלים יהיו מאוורר החוצה (לסובב). אנחנו גם צריכים להוסיף עיגול לבן עם ה #pinStarCenter מזהה לאסתטיקה. זה יהיה ממוקם על גבי הסמן, וזה יהיה חתיכת מרכז של סמן מיקום.

HTML

אנחנו מציבים את תיבת הסימון לפני כן, והמעגל הלבן, העלים:

CSS

ראשית, הגדרנו את הסגנונות הבסיסיים עבור תיבת הסימון ואת מעגל הכיסוי:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; גובה: 50px; תפקיד מוחלט משמאל: 0; .. you top: -60px; bottom: 0; margin: auto; צבע רקע: #fff; border-radius: 50%; הסמן: מצביע;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> קלט [type = "checkbox"] width: 100%; גובה: 100%; הסמן: מצביע;  

כמו כל עלה יסתובב לאורך ציר z בזוויות שונות, אנחנו צריכים להגדיר את transform: rotatez (); רכוש בהתאם ליצור צורה כוכב. אנחנו גם להחיל את המעבר נכס עבור אפקט הסיבוב (ליתר דיוק אנו משתמשים מעבר: שינוי ליניארי 1 הכלל לעלים).

 #pinStarCenterChkBox: מסומן ~ .pinStarLeaf מעבר: שינוי ליניארי 1;  #pinStarCenterChkBox: מסומן ~ .pinStarLeaf: nth of of type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: מסומן ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: מסומן ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: מסומן ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: מסומן ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

אם יש לך להסתכל על CSS לעיל, אתה יכול לראות מן הנוכחות של #pinStarCenterChkBox: מסומן ~ בורר אחים כללי שאנחנו רק להוסיף המעבר ו שינוי צורה נכסים כאשר תיבת הסימון מסומנת (כאשר המשתמש לחץ על הסמן).

4. שינוי מרכז הסיבוב

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

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

 .pinStarLeaf transform-origin: 30px 30px; מעבר: שינוי ליניארי 1;  

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

הבנת איך ubic-Bezier () עובד

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

אבל קודם, בואו להבין את לוגיקה מאחורי cubic-bezier () פונקציית תזמון כך שאתה יכול בקלות להבין את האפקט להקפיץ.

התחביר עבור cubic-bezier () הפונקציה היא הבאה, ד ו t הם המרחק ו זמן, ואת הערכים שלהם בדרך כלל נע בין 0 ל 1:

cubic-bezier (t1, d1, t2, d2)

למרות שמסביר CSS cubic-bezier () מבחינת המרחק והזמן לא מדויק, זה הרבה יותר קל להבין את זה ככה.

נניח שיש תיבה הנעה מנקודה א 'עד ב' ב 6 שניות. נשתמש להלן cubic-bezier () פונקציית תזמון המעבר עם t1 = 0 ו d1 = 1 ערכים.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) 

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

ננסה את אותו המעבר עם ערכים t1 = 1 ו d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) 

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

כפי שאתה יכול לראות, d1 שולט המרחק בין A & את אמצע נקודה, ו t1 ה הזמן שנדרש כדי להגיע לנקודת האמצע מ.

בוא נשתמש d2 ו t2 עכשיו. שניהם t1 ו d1 יהיה 1, ו t2 = 1 ו d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) 

תיבת נע כמעט במחצית הדרך תוך 3 שניות (עקב t1 = 1, d1 = 1), ובתוך זמן קצר הוא קופץ לנקודה ב '.

הדוגמה האחרונה מחליפה את הערכים הקודמים של t2 ו d2You

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) 

תיבת נע כמעט במחצית הדרך תוך 3 שניות (עקב t1 = 1, d1 = 1), ואז 3 שניות נוספות לא זז הרבה לפני שקפוץ לנקודה ב '.

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

למרות שאתה כנראה לא צריך את זה ארוך (עדיין דלילה) הסבר cubic-bezier () בשלב זה, אני חושב שזה יעזור לך להבין את הפונקציה הזו טוב יותר. עכשיו, איפה את להקפיץ לבוא בכל זה?

5. הוספת אפקט הקפיצה עם Cubic-Bezier ()

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

א d2 ערך של יותר מ 1 לוקח את הקופסה מעבר לנקודה ב לפני שחזרתי למנוחה ב- B בסוף האנימציה. מכאן אפקט קפיצה קדימה ואחורה.

אני עכשיו להוסיף את cubic-bezier () ערכים ישירות ההדגמה שלנו במקום לשעבר ליניארי הערך של המעבר רכוש, ולתת לך לראות את התוצאות.

 #pinStarCenterChChBox: מסומן ~ .pinStarLeaf מעבר: שינוי 1 cubic-bezier (.8, - 5, .2, 1.4);  

הנה התוצאה הסופית, הנפשת אוהד CSS בלבד עם אפקט יציאה מדף כניסה:

לשם השוואה ולהבין את האפקט להקפיץ טוב יותר, הנה איך cubic-bezier () הערך של האנימציה מתנהג כאשר הוא מוחל על תיבת הדוגמה שלנו: