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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

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

תמיכה בדפדפן

  • 115
  • 115
  • x

מקור

טוקופדיה

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

הצלחנו לצמצם עד 80% משורות הקוד שלנו בהשוואה לשימוש באירועי גלילה קונבנציונליים ב-JavaScript, וגילינו שהשימוש הממוצע במעבד (CPU) ירד מ-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 כדי להשיג את אותה השפעה.

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

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

תמונת אנימציה מבוססת גלילה חושפת אפקט לטעינת תמונות ב-redBus גלריית התמונות.

קוד (בנייד)

בדוגמה הקודמת, 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%;
   }
`;

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

Policybazaar

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

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

אנימציה המבוססת על גלילה animate-timeline בטבלה להשוואה בין תוכניות בהשקעות וב-LIB (תחום העסקים)
.

קוד

בדומה לדוגמה הקודמת מ-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 (דף הבית)

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

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

אנימציה המבוססת על גלילה הופכת בהדרגה ל הדרגתית, נעלמת הדרגתית של כרטיסי מוצר ב-Investment וב-Life LOB (סוג העסק).

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

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

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

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

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

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

}

משאבים

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