אנימציה בין תצוגות

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

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

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

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

שימוש בתרגומים כדי לעבור בין תצוגות

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

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

ה-CSS של מאגר התגים הוא:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

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

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

הוספת transition בנכס transform מספקת אפקט שקף נחמד. כדי להעניק תחושה נחמדה, נעשה שימוש בעקומה cubic-bezier מותאמת אישית, שעליה דיברנו במדריך להתאמה אישית של התאמה אישית.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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

.details-view {
  transform: translateX(100%);
}

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

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

לבסוף, אנחנו מוסיפים את הצהרות ה-CSS למחלקות האלה.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

רוצים לנסות?

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

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

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

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