היסודות של פונקציות המעבר

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

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

סיכום

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

באנימציה קלאסית, המונח לתנועה שמתחילה לאט ומאיצה הוא "כניסה איטית", והמונח לתנועה שמתחילה מהר ומאטה הוא "יציאה איטית". המונחים הנפוצים ביותר באינטרנט לפעולות האלה הם "ease in" ו-"ease out", בהתאמה. לפעמים שתי האפשרויות משולבות, וזה נקרא "האטה בכניסה וביציאה". לכן, ריכוך הוא בעצם התהליך שבו הופכים את האנימציה לפחות חדה או בולטת.

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

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

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

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

מקור: מעברי CSS, ‏ W3C

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

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

עקומת אנימציה לינארית.

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

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

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

צפייה באנימציה לינארית

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

transition: transform 500ms linear;

אנימציות עם האטה בסוף

עקומת אנימציה של האטה.

האטה בסוף גורמת לאנימציה להתחיל מהר יותר מאנימציות לינאריות, והיא גם מאטה בסוף.

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

צפייה באנימציה עם האטה

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

transition: transform 500ms ease-out;

אנימציות עם האצה הדרגתית

עקומת אנימציה של כניסה הדרגתית.

אנימציות מסוג Ease-in מתחילות לאט ומסתיימות מהר, בניגוד לאנימציות מסוג Ease-out.

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

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

צפייה באנימציה של כניסה הדרגתית

כדי להשתמש באנימציית ease-in, בדומה לאנימציות ease-out ו-linear, אתם יכולים להשתמש במילת המפתח שלה:

transition: transform 500ms ease-in;

אנימציות של כניסה ויציאה הדרגתית

עקומת אנימציה של כניסה ויציאה הדרגתית.

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

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

צפייה באנימציה עם האצה והאטה

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

transition: transform 500ms ease-in-out;