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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

אבל, כחלק תכונות של שירות CSS וממשק המשתמש שמובילות לדפדפנים, אתם יכולים ליצור אנימציות שמבוססות על גלילה. עם גלילה וציר הזמן לוחות זמנים, קונספטים חדשים שמשתלבים עם Web Animations API (WAAPI) וגם CSS Animations API, עכשיו אפשר ליהנות מהחלקה אנימציות מבוססות גלילה שפועלות מהשרשור הראשי, באמצעות כמה שורות במקרה לדוגמה הזה תוכלו לראות מהם הביצועים של טוקופדיה, RedBus ו-Policybazaar. כבר נהנית מהתכונה החדשה הזו.

Tokopedia

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

הצלחנו להפחית עד 80% משורות הקוד שלנו בהשוואה לשימוש באירועי גלילה רגילים ב-JavaScript, שמנו לב שהשימוש הממוצע במעבד ירד מ-50% ל-2% בזמן הגלילה — אנדי וויהלים, מהנדס תוכנה בכיר, Tokopedia

קוד

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

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

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

תרחישים לדוגמה

גלריית תמונות עם חשיפת תמונה (עבור ניידים) ותהליך כיסוי (עבור מחשב).

קוד (נייד)

בדוגמה הקודמת, Tokopedia השתמשה בהתקדמות הגלילה האנונימית ציר הזמן. בקוד הבא, RedBus משתמש בהתקדמות של צפייה בעלת שם ציר הזמן. האנימציה משנה את opacity וה-clip-path של <img> בתוך הרכיב animation-range המוגדר, שבתוך הרכיב הקרוב ביותר במקרה הזה, שהיא הגלילה של גלריית התמונות.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

שמחנו מאוד לראות את התכונה הזו, כי היא שילוב מושלם של ביצועים עם חוויה טובה יותר, וכך משפרים את האותות של חוויית השימוש בדפים לצורך אופטימיזציה למנועי חיפוש. מעל לכן עקומת הלמידה המינימלית הופכת את זה לחובה בכל מסחר אלקטרוני האתר. קיבלנו גם משוב חיובי ותמיכה מצוותים אחרים, SDA למסלולים נוספים שעוברים המשתמשים.— אמיט קומאר (Amit Kumar), מנהל הנדסה בכיר מנהל, RedBus.

בזאר המדיניות

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

באמצעות אנימציות מבוססות גלילה, הצלחנו למקסם את שטח אזור התצוגה בקרב המשתמשים כדי להשוות בין תוכניות, כך שהקריאה תהיה ממוקדת בלי פחות בלגן חדש.—רישאב מהרוטרה, ראש החברה Design for Life Insurance BU, PolicyBazaar

קוד

בדומה לדוגמה הקודמת מ-Tokopedia, Policybazaar משתמשת הפונקציה scroll() כדי להגדיר ציר זמן אנונימי להתקדמות בגלילה. לשלוט בהתקדמות של אנימציית ה-CSS. במקרה הזה כיווץ הגופן גודל והדרגתיות של הכותרת על סמך מיקום הגלילה בתוך השדה המוגדר animation-range

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

אנימציות מבוססות גלילה כדפוס נפוץ בתהליך המשתמש

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

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

RedBus (דף הבית)

Policybazaar (דף פרטי מוצר)

Tokopedia (דף פרטי המוצר)

דברים שכדאי לקחת בחשבון כשמשתמשים ב-API של אנימציות מבוססות-גלילה

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

ב-CSS, אפשר להשתמש ב-@supports כדי לבדוק אם יש תמיכה בציר הזמן של האנימציה לפני שמשתמשים באנימציות שמונעות גלילה. לדוגמה:

@supports (animation-timeline: scroll()) {

}

משאבים

• הדגמות של אנימציות שמונעות גלילה
• אנימציה של רכיבים בזמן גלילה עם אנימציות שמבוססות על גלילה
• Codelab: תחילת העבודה עם אנימציות שמונעות גלילה ב-CSS
• תוסף ל-Chrome: כלי לניפוי באגים באנימציה שמבוססת על גלילה
• Polyfill של ציר הזמן לגלילה.
• רוצה לדווח על באג או על תכונה חדשה? חשוב לנו לשמוע מה דעתך.

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

• למה היכולות של ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני?
• הצגת מקרים לדוגמה של Transitions
• מקרים לדוגמה של Popover API
• מקרים לדוגמה של שאילתות קונטיינר
• מקרים לדוגמה של בורר:has()