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

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

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

סיכום

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

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

הקלה על מילות מפתח

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

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

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

מקור: CSS Transits, 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;