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

איך מרככים את האנימציות ומעניקים להן משקל?

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

סיכום

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

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

מילות מפתח פשוטות

גם מעברים וגם אנימציות ב-CSS מאפשרים לבחור את סוג ההאצה (easing) שרוצים להשתמש בו באנימציות. אפשר להשתמש במילות מפתח שמשפיעות על העקומה של האנימציה הרלוונטית (או 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 אלפיות השנייה מתאים, אבל המספר המדויק תלוי מאוד בתחושה של הפרויקט. עם זאת, בגלל ההתחלה האיטית, האמצע המהיר והסיום האיטי, יש יותר ניגודיות באנימציה, וזה יכול להיות מאוד מרוצה למשתמשים.

צפייה באנימציה עם תחילה איטית וסיום איטי

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

transition: transform 500ms ease-in-out;