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

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

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

סיכום

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

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

הוספת מילות מפתח

גם מעברים וגם אנימציות ב-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;