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

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

Sam Thorogood

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

סיכום

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

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

לקו עקומת Bézier יש ארבעה ערכים או שני זוגות של מספרים, כאשר כל זוג מתאר את הקואורדינטות X ו-Y של נקודות הבקרה של קו עקומת Bézier מעוקב. לנקודת ההתחלה של עקומת Bézier יש קואורדינטות (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 frameworks כדי לקבל יותר שליטה

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

TweenMax

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

להצגת אנימציה אלסטית וקלה

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

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

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

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

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

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