ניפוי באגים של אנימציות מונעות גלילה ב-Chrome עם OffiDocs
ניפוי באגים של אנימציות מונעות גלילה - תוסף לחנות האינטרנט של Chrome
תיאור:
הפעל את תוסף חנות האינטרנט המקוונת של Chrome, Scroll Driven Animations, באמצעות OffiDocs Chromium online.
הרחבת DevTools להמחשה וניפוי באגים באנימציות מונחות גלילה
השתמש בהרחבה זו של DevTools כדי לאתר באגים ולהמחיש אנימציות מונחות גלילה.
- הדמיינו את הגלילה, האלמנט והנושא של האנימציות המונעות על ידי גלילה.
- תומך גם ב-ScrollTimeline וגם ב-ViewTimeline.
- עובד עם אנימציות מונחות גלילה מבוססות CSS וגם מבוססות WAAPI.
- משתלב יפה עם `מיקום: דביק`.
- דמיינו את `animation-range-start` ו-`animation-range-end`.
- ערוך את הערכים `animation-range-start` ו-`animation-range-end`.
לאחר ההתקנה, חלונית חדשה בשם "אנימציות מונעות גלילה" מתווספת ללוח האלמנטים של Chrome DevTools. כדי להשתמש בה, בדקו אלמנט באמצעות Chrome DevTools כרגיל. בחרו בלוח "אנימציות מונעות גלילה" כדי לראות ויזואליזציה של אנימציות מונעות גלילה שנוספו לאלמנט זה. הוויזואליזציה היא ייצוג חי של הגלילה, האלמנט המונפש, ובמקרה של ViewTimeline - הנושא שעוקב אחריו: בזמן הגלילה במסמך, הוויזואליזציה גם מתעדכנת.
השתמשו בסרגל הכלים העליון כדי לעבור בין אנימציות מרובות _(אם יש יותר מאחת)_ או כדי להגדיר את גורם קנה המידה של הוויזואליזציה. בדרך כלל אין צורך להגדיר את גורם קנה המידה, מכיוון שהוויזואליזציה מתאימה את עצמה אוטומטית לשטח הזמין. כמו כן, בסרגל הכלים העליון נמצאים מחוון המציין באיזה סוג של ציר זמן גלילה אתם מתמודדים, וכמה מספרי התקדמות: התקדמות גלילה כוללת, התקדמות אפקט, היסט גלילה בפועל _(בפיקסלים)_.
השתמשו בלחצן "עריכת ערכים" בתחתית כדי לפתוח עורך טווחים. לאחר הצגת העורך, ההדמיה מציגה גם אינדיקטורים לטווח ההתחלה והסיום. במקרה של ScrollTimeline, אלו הן שתי שורות על תוכן הגלילה. במקרה של ViewTimeline, אלו הן שתי תיבות המייצגות את האזורים עבור ערכי `animation-range-*` שנקבעו. שנו את הערכים באמצעות התפריט הנפתח ו/או הקלטים. שימו לב שהקלטים אינם מתעדכנים בזמן אמת _(בינתיים)_; לאחר השינוי לחצו במקום כלשהו מחוץ לשדה כדי לעדכן את הערך.
תוסף האינטרנט Scroll Driven Animations Debugger משולב עם OffiDocs Chromium באינטרנט