ניתן לבדוק ולשנות אנימציות באמצעות הכרטיסייה אנימציות בכלי הפיתוח ל-Chrome.
סקירה כללית
כדי לצלם אנימציות, פותחים את החלונית אנימציות. התכונה מזהה באופן אוטומטי אנימציות וממיינת אותן לקבוצות.
לחלונית אנימציות יש שתי מטרות עיקריות:
- בדיקת אנימציות. האטה של אנימציה, הפעלה מחדש או בדיקה של קוד המקור קבוצה.
- שינוי אנימציות. שינוי התזמון, ההשהיה, משך הזמן או ההיסטים של נקודות המפתח בקבוצת אנימציה. אי אפשר לערוך תמונות מפתח או בזייה.
בחלונית אנימציות יש תמיכה באנימציות CSS, במעברים ב-CSS, באנימציות אינטרנט וב-View Transitions API.
עדיין אין תמיכה ב-requestAnimationFrame אנימציות.
מהי קבוצת אנימציה?
קבוצת אנימציות היא קבוצה של אנימציות שנראות קשורות זו לזו.
נכון לעכשיו, באינטרנט אין בכלל רעיון אמיתי של אנימציה קבוצתית, ולכן מעצבי תנועה ומפתחים יוצרים אנימציות בודדות וזמנים אותן כך שייראו כאפקט חזותי אחד עקבי. בחלונית אנימציות מוצגות תחזיות לאנימציות קשורות על סמך שעת ההתחלה (לא כולל עיכובים), והן מקובצות זו לצד זו.
במילים אחרות, בחלונית Animations (אנימציות) מקובצות אנימציות שמופעלות באותו בלוק סקריפט, אבל אם הן אסינכרניות, הן מופיעות בקבוצות שונות.
פתיחה של חלונית האנימציות
יש שתי דרכים לפתוח את החלונית אנימציות:
- בוחרים באפשרות
התאמה אישית ושליטה בכלים למפתחים > כלים נוספים > אנימציות.
פותחים את תפריט הפקודה באמצעות אחת מהאפשרויות הבאות:
- ב-macOS: Command+Shift+P
- ב-Windows, ב-Linux או ב-ChromeOS: Control+Shift+P
לאחר מכן מתחילים להקליד
Show Animationsובוחרים את הלוח המתאים ב'מגירה'.
כברירת מחדל, החלונית אנימציות נפתחת ככרטיסייה לצד המגירה מסוף. ככרטיסייה בחלונית נשלפת, אפשר להשתמש בה עם כל חלונית או להעביר אותה לחלק העליון של כלי הפיתוח.
כשפותחים את החלונית אנימציות, האנימציות הפעילות מתועדות באופן אוטומטי. אם אנימציה מופעלת בזמן טעינת הדף או שכבר הפסיקה, צריך לטעון מחדש את הדף כשהחלונית פתוחה.
היכרות עם ממשק המשתמש של חלונית האנימציות
בחלונית אנימציות יש ארבעה חלקים עיקריים:
- פקדים. מכאן תוכלו לנקות את כל קבוצות האנימציה שצולמו, השהיה או המשך אנימציות או לשנות את המהירות של קבוצת האנימציה שנבחרה.
סקירה כללית הצגת קבוצות אנימציה שצולמו משני סוגים, שמסומנות בסמלים: תנועה הנגרמת על ידי גלילה ו רגיל (מבוסס זמן).
בוחרים כאן קבוצת אנימציה כדי לבדוק אותה ולשנות אותה בחלונית פרטים.
ציר הזמן. בהתאם לסוג קבוצת האנימציה, ציר הזמן יכול להיות:
- בפיקסלים עבור אנימציות שמבוססות על גלילה של .
- באלפיות השנייה עבור אנימציות מבוססות-זמן .
בציר הזמן, אפשר הפעלה מחדש אנימציה, להחליק אותה או לעבור לנקודה ספציפית.
פרטים. בודקים ומשנים את קבוצת האנימציה שנבחרה.
כדי לצלם אנימציה, מפעילים אותה כשהחלונית אנימציות פתוחה.
בדיקת האנימציות
אחרי שצילמתם אנימציה, יש כמה דרכים להפעיל אותה מחדש:
- מעבירים את הסמן מעל התמונה הממוזערת שלה בחלונית Overview כדי לראות תצוגה מקדימה שלה.
- גוררים את סמן המיקום (הפס האנכי האדום) כדי לקרצף את האנימציה של אזור התצוגה, או לוחצים במקום כלשהו בציר הזמן כדי להגדיר את המיקום הנוכחי לנקודה ספציפית. האנימציה ממשיכה לפעול אם היא כבר פועלת, ומפסיקה אחרת.
- בוחרים את קבוצת האנימציה בחלונית Overview (כדי שהיא תוצג בחלונית Details) ולוחצים על הלחצן
Replay.
האנימציה תופעל מחדש באזור התצוגה.
לוחצים על הלחצנים 
Animation speed בסרגל Controls כדי לשנות את מהירות התצוגה המקדימה של קבוצת האנימציה שנבחרה.
הצגת פרטי האנימציה
אחרי שצילמתם קבוצת אנימציות, לוחצים עליה בחלונית סקירה כללית כדי להציג את הפרטים שלה.
בחלונית פרטים, לכל אנימציה מופיעה שורה משלה. כדי לראות את השם המלא של הרכיב התואם, משנים את הגודל של עמודת השם.
מעבירים את העכבר מעל אנימציה כדי להדגיש אותה באזור התצוגה. לוחצים על האנימציה כדי לבחור אותה בחלונית Elements.
חלק מהאנימציות חוזרות על עצמן ללא הגבלת זמן אם המאפיין animation-iteration-count שלהן מוגדר ל-infinite. בחלונית אנימציות מוצגות ההגדרות ואיטרציות שלהן.
הקטע הימני והכהה ביותר באנימציה הוא ההגדרה שלה. הקטעים הימניים, דהויים יותר שמייצגים איטרציות.
לדוגמה, בצילום המסך הבא, קטעים שני ושלוש מייצגים חזרות על קטע אחד.
אם שני אלמנטים מופעלת עליהם אותה אנימציה, לוח Animations מקצה להם את אותו צבע. הצבע עצמו הוא אקראי ואין לו משמעות. לדוגמה, בצילום המסך למטה
שני הרכיבים div.eye.left::after ו-div.eye.right::after מכילים את אותה אנימציה (eyes)
הוחלו עליהן, וכך גם הרכיבים div.feet::before ו-div.feet::after.
שינוי אנימציות
יש שלוש דרכים לשנות אנימציה בחלונית אנימציות:
- משך הזמן של האנימציה.
- תזמוני תמונות מפתח.
- עיכוב לפני הפעלה.
עבור הקטע הזה, נניח שצילום המסך הבא מייצג את האנימציה המקורית:
כדי לשנות את משך האנימציה, גוררים את העיגול הראשון או האחרון.
אם האנימציה מגדירה כללי תמונות מפתח כלשהם, הם מיוצגים כעיגולים פנימיים לבנים. גוררים אחד מהם כדי לשנות את התזמון של keyframe.
כדי להוסיף עיכוב לאנימציה, לוחצים על האנימציה עצמה, לא על העיגולים, וגוררים אותה למקום הרצוי.
עריכה של @keyframes בשידור חי
כשמשנים את @keyframes בקטע סגנונות, אפשר לראות את האפקטים בחלונית אנימציות באופן מיידי.
כדאי לנסות את התכונה בדף ההדגמה הזה:
- פותחים את החלונית אנימציות. התכונה לוכדת באופן אוטומטי את אנימציית הדופק הנוכחית בדף. בוחרים את האנימציה בקטע 'אמצעי בקרה' בסרגל הפעולות.
- בקטע Elements, בודקים את הרכיב עם
class="pulser"ובקטע Styles, מחפשים את הקטע@keyframes pulse. - אפשר לנסות לשנות את תמונות המפתח, למשל, לשנות את תמונת המפתח השנייה מ-
50%ל-20%. - בודקים איך השינויים בסגנונות משפיעים על האנימציה שצולמה בחלונית אנימציות.
עריכת רכיבי הפסאודו ::view-transition במהלך אנימציה
באמצעות View Transitions API, אפשר לשנות את ה-DOM בשלב אחד, תוך יצירת מעבר מונפש בין שני המצבים. במהלך אנימציה, ה-API בונה עץ פסאודו-רכיב עם המבנה הבא:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
כדי לערוך את המבנה הזה ברכיבים > סגנונות:
- פותחים את כלי הפיתוח ובודקים דף שבו נעשה שימוש ב-View Transitions API. לדוגמה, דף ההדגמה הזה.
- בקטע אנימציות, לוחצים על השהיה.
בדף, מפעילים אנימציה. המערכת תתעד את התנועה בחלונית אנימציות ותשהה אותה באופן מיידי. עכשיו אפשר למצוא את המבנה
::view-transitionב-DOM, מעל הרכיב<head>.
בקטע Elements (רכיבים) > Styles (סגנונות), משנים את ה-CSS של פסאודו-רכיבי
::view-transition.ממשיכים את האנימציה ומפעילים מחדש כדי לראות את התוצאה.
מידע נוסף זמין במאמר מעבר חלק ופשוט באמצעות View Transitions API.