התאמה אישית של הקלה

אפשר לצאת לשטח וליצור אנימציות בהתאמה אישית לפרויקטים.

Sam Thorogood

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

סיכום

  • התאמה אישית של ההתאמה מאפשרת להעניק יותר אישיות לפרויקטים שלכם.
  • אפשר ליצור עקומות בזייה ממעלה הדומות לעקומות האנימציה המוגדרות כברירת מחדל (קלות יציאה, כניסה קלה וכו'), אך עם הדגשה במקומות שונים.
  • השתמש ב-JavaScript כאשר ברצונך לשלוט טוב יותר בתזמון ובהתנהגות האנימציה, לדוגמה, אנימציות אלסטיות או חוזרות.

אם אתם יוצרים אנימציה באמצעות CSS, תראו שאפשר להגדיר עקומות בזייה ממעלה שלישית כדי להגדיר את התזמון. למעשה, מילות המפתח ease, ease-in, ease-out ו-linear ממופות לעקומות בזייה מוגדרות מראש, המפורטות במפרט מעברי CSS ובמפרט אנימציות באינטרנט.

לעקומות בזייה האלה יש ארבעה ערכים, או שני זוגות של מספרים, כשכל זוג מתאר את קואורדינטות ה-X וה-Y של נקודות הבקרה של עקומת בזייה ממעלה שלישית. לנקודת ההתחלה של עקומת בזייה יש קואורדינטות (0, 0) ולנקודת הסיום יש קואורדינטה (1, 1). עליכם להגדיר את ערכי ה-X וה-Y של שתי נקודות הבקרה. ערכי ה-X של שתי נקודות הבקרה חייבים להיות בין 0 ל-1, וערך ה-Y של כל נקודת בקרה יכול לחרוג מהמגבלה של [0, 1], למרות שהמפרט לא ברור עד כמה.

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

לשם השוואה, הנה שתי עקומות: עקומה אופיינית מסוג 'קלות פנימה' ועקומה בהתאמה אישית:

עקומת אנימציה קלה פנימה.

עקומת אנימציה בהתאמה אישית.

צפייה באנימציה עם התאמה אישית לצפייה

ה-CSS של העקומה המותאמת אישית הוא:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

שני המספרים הראשונים הם קואורדינטת ה-X וה-Y של נקודת הבקרה הראשונה, ושני המספרים האחרים הם קואורדינטות ה-X וה-Y של נקודת הבקרה השנייה.

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

נסו להשתמש בכלי לעקומת אנימציה ובדקו איך העקומה משפיעה על התחושה של אנימציה.

שימוש במסגרות JavaScript להשגת שליטה רבה יותר

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

TweenMax

מסגרת חזקה אחת היא GreenSock's TweenMax (או TweenLite, אם רוצים לשמור על פשטות), מפני שניתן לקבל ממנו הרבה שליטה בספריית JavaScript קטנה, וזהו בסיס קוד מבוגר מאוד.

לצפייה באנימציה בקלי קלות

כדי להשתמש ב-TweenMax, צריך לכלול את הסקריפט הבא בדף:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

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

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

במסמכי התיעוד של TweenMax מודגשות כל האפשרויות שזמינות לך, ולכן כדאי לקרוא אותם.