עקרונות בסיסיים של התאמה

כדאי ללמוד איך לרכך את האנימציות ולתת להן משקל.

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

סיכום

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

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

מילות מפתח קלות יותר

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

לפניכם כמה ממילות המפתח שבהן אפשר להשתמש ב-CSS:

• linear
• ease-in
• ease-out
• ease-in-out

מקור: CSS Transitions, W3C

אפשר גם להשתמש במילת המפתח steps, שמאפשרת ליצור מעברים עם שלבים נפרדים, אבל מילות המפתח שמפורטות למעלה הן השימושיות ביותר ליצירת אנימציות שנראות טבעיות.

אנימציות לינאריות

אנימציות ללא סוג כלשהו של התאמה לצפייה נקראות לינאריות. תרשים של מעבר לינארי נראה כך:

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

בין אם אתם מתכנתים את האנימציות באמצעות CSS או JavaScript, תגלו שתמיד יש אפשרות לתנועה ליניארית.

הצגת אנימציה לינארית

כדי להשיג את האפקט שלמעלה באמצעות CSS, הקוד ייראה בערך כך:

transition: transform 500ms linear;

אנימציות קלות יותר

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

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

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

יש הרבה דרכים לפשט את התהליך, אבל הדרך הפשוטה ביותר היא להשתמש במילת המפתח ease-out ב-CSS:

transition: transform 500ms ease-out;

אנימציות קלות

אנימציות קלות מתחילות באיטיות ומסתיימות במהירות, בדומה לאנימציות מקלות.

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

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

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

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

transition: transform 500ms ease-in;

אנימציות קלות החוצה

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

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

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

כדי לקבל אנימציה קלה ופשוטה, אפשר להשתמש במילת המפתח ease-in-out של CSS:

transition: transform 500ms ease-in-out;