בחירת ההתאמה המתאימה

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

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

סיכום

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

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

בנוסף לזו שצוינה במילת המפתח ease-out ב-CSS, יש קבוצה ידועה של משוואות מאפשרות הקלה, שהטווח שלה הוא 'אגרסיביות'. כדי ליצור אפקט פשוט של הפחתה מהירה, כדאי להשתמש בהפחתה הדרגתית.

לצפייה באנימציה של Quintic קלילה

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

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

בחירת משך הזמן המתאים לאנימציה

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

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

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