בוחרים את ההתאמה המתאימה לפרויקט: התאמה לצפייה, יציאה או שניהם. אולי אפילו כדאי להשתמש ב'קפיצות' בשביל הכיף הכי גדול!
שוחחתם על האפשרויות השונות הזמינות לצפייה באנימציות, באיזה סוג של שימוש כדאי להשתמש בפרויקטים ואיזה משך זמן צריכים להיות לאנימציות?
סיכום
- השתמשו באנימציות מקלות על אלמנטים בממשק המשתמש. התאמה קווינטית היא קלה מאוד, אבל גם מהירה.
- יש להקפיד להשתמש בכל משך האנימציה. כניסות קלות וביטול עסקאות צריכות להיות באורך של 200 אלפיות השנייה עד 500 אלפיות השנייה, בעוד שפעולות קפיצה וקלות אלסטיות צריכות להימשך 800 אלפיות שנייה עד 1,200 אלפיות שנייה.
באופן כללי, ביטוי הקלה הוא הבחירה הנכונה, ובהחלט היא ברירת מחדל טובה. היא מתחילה לפעול במהירות, ומעניקה לאנימציות תחושה של תגובה, שזה דבר רצוי, אבל עם האטה נעימה בסיום.
יש קבוצה של משוואות ידועות שניתן להסיר בקלות מעבר לזו שצוינה עם מילת המפתח ease-out ב-CSS, והטווח שלה הוא 'אגרסיביות'. כדי ליהנות מאפקט קל של סגירה מהירה, כדאי להשתמש בהתאמה מהירה של יציאה.
יש להשתמש במשוואות מקלות אחרות, במיוחד עזיבות מהדף הראשון או הקלות גמישות, במידה מוגבלת, ורק כאשר הדבר מתאים לפרויקט שלכם. יש כמה דברים שגורמים למשתמש לצאת מחוויה, כמו אנימציה שגורמת להטריד. אם הפרויקט לא נועד להיות מהנה, אל תציגו רכיבים שחוזרים על עצמם סביב ממשק המשתמש. לעומת זאת, אם אתם יוצרים אתר שהוא אמור להיות קליל, אז אני רוצה להשתמש בעזיבות מהדף הראשון!
תוכלו לשחק בקלות, לראות אילו מהן מתאימות לאופי של הפרויקט שלכם, ולהמשיך משם. רשימה מלאה של סוגי התאמה והדגמות זמינות בכתובת easings.net.
בחירת משך האנימציה המתאים
חשוב שכל אנימציה שמוסיפים לפרויקט תהיה באורך הנכון. קצרה מדי והאנימציה תיראה אגרסיבית וחדה; ארוכה מדי, והיא תהיה חוסמת ומרגיזה.
- קלות שימוש: כ-200 אלפיות שנייה עד 500 אלפיות שנייה. כך העין תוכל לראות את האנימציה, אבל היא לא תרגיש סתירה.
- קלות שימוש: כ-200 אלפיות השנייה עד 500 אלפיות השנייה. חשוב לזכור שהצליל ירטוט בסוף, ושום שינויים בתזמון לא ירככו את ההשפעה הזו.
- אפקטים של קפיצה או אלסטיות: בסביבות 800-1,200 אלפיות השנייה. עליך להמתין עד שאפקט האלסטי או העזיבה יהיה "להיתקע". בלי תוספת הזמן הזו, החלק האלסטי שקופץ מהאנימציה יהיה אגרסיבי ולא נעים לעין.
כמובן שאלו רק הנחיות. כדאי להתנסות בקלילות משלכם ולבחור מה מתאים לפרויקטים שלכם.