ניתן לבדוק ולשנות אנימציות באמצעות הכרטיסייה אנימציות בכלי הפיתוח ל-Chrome.
סקירה כללית
כדי לצלם אנימציות, פותחים את החלונית אנימציות. הוא מזהה באופן אוטומטי אנימציות וממיין אותן לקבוצות.
לחלונית אנימציות יש שתי מטרות עיקריות:
- בדיקת אנימציות. האטה של אנימציה, הפעלה מחדש או בדיקה של קוד המקור קבוצה.
- לשנות את האנימציות. לשנות את ההיסט של התזמון, ההשהיה, משך הזמן או ההיסט של תמונות המפתח של קבוצת אנימציה. אי אפשר לערוך תמונות מפתח או בזייה.
החלונית אנימציות תומכת באנימציות CSS, במעברי CSS, באנימציות אינטרנט וב-View Transitions API.
עדיין אין תמיכה ב-requestAnimationFrame אנימציות.
מהי קבוצת אנימציה?
קבוצת אנימציה היא קבוצה של אנימציות שנראה קשורות זו לזו.
נכון לעכשיו, באינטרנט אין בכלל רעיון אמיתי של אנימציה קבוצתית, ולכן מעצבי תנועה ומפתחים יוצרים אנימציות בודדות וזמנים אותן כך שייראו כאפקט חזותי אחד עקבי. החלונית אנימציות יוצרת חיזוי של אנימציות קשורות על סמך שעת ההתחלה (לא כולל עיכובים) ומקבצת אותן זו לצד זו.
במילים אחרות, החלונית אנימציות מקבצת יחד אנימציות שמופעלות באותו בלוק סקריפט, אבל אם הן אסינכרוניות, הן מגיעות לקבוצות שונות.
פתיחה של חלונית האנימציות
יש שתי דרכים לפתוח את החלונית אנימציות:
- בוחרים באפשרות
התאמה אישית ושליטה בכלי הפיתוח > כלים נוספים > אנימציות.
פותחים את תפריט הפקודה באמצעות אחת מהאפשרויות הבאות:
- ב-macOS: Command+Shift+P
- ב-Windows, ב-Linux או ב-ChromeOS: Control+Shift+P
לאחר מכן אפשר להתחיל להקליד
Show Animationsולבחור את החלונית המתאימה בחלונית 'חלונית הזזה'.
כברירת מחדל, החלונית אנימציות נפתחת ככרטיסייה לצד חלונית ההזזה של המסוף. ככרטיסייה בחלונית הזזה, אפשר להשתמש בה בכל חלונית או להעביר אותה לחלק העליון של כלי הפיתוח.
בחלונית אנימציות מצלמים באופן אוטומטי אנימציות פעילות כשפותחים אותן. אם אנימציה מופעלת בזמן טעינת הדף או שכבר נעצרה, צריך לטעון מחדש את הדף כשהחלונית פתוחה.
היכרות עם ממשק המשתמש של חלונית האנימציות
בחלונית אנימציות יש ארבעה קטעים עיקריים:
- פקדים. מכאן תוכלו לחסום לנקות את כל קבוצות האנימציה שצולמו, להשהות השהיה או play_arrow המשך אנימציות או לשנות את המהירות של קבוצת האנימציה שנבחרה.
סקירה כללית הצגת קבוצות אנימציה שהוקלטו, משני סוגים, שמסומנות בסמלים: עכבר שמבוססת על גלילה ולוח זמנים רגיל (מבוסס זמן).
אפשר לבחור כאן קבוצת אנימציה כדי לבדוק ולשנות אותה בחלונית פרטים.
ציר הזמן. בהתאם לסוג של קבוצת האנימציה, ציר הזמן יכול להיות:
- בפיקסלים עבור אנימציות עכבר שמונעות גלילה.
- באלפיות השנייה עבור אנימציות מבוססות זמן לתזמון.
בציר הזמן תוכלו להפעיל מחדש להפעיל מחדש אנימציה, לעבור עליה או לקפוץ לנקודה מסוימת.
פרטים. בדיקה ושינוי של קבוצת האנימציות שנבחרה.
כדי לצלם אנימציה, מפעילים אותה כשהחלונית אנימציות פתוחה.
בדיקת האנימציות
לאחר צילום האנימציה, יש כמה דרכים להפעיל אותה מחדש:
- כדי לראות תצוגה מקדימה של התמונה הממוזערת, מעבירים את העכבר מעל התמונה הממוזערת שלה בחלונית סקירה כללית.
- גוררים את סמן המיקום (הפס האנכי האדום) כדי לקרצף את האנימציה של אזור התצוגה, או לוחצים במקום כלשהו בציר הזמן כדי להגדיר את המיקום הנוכחי לנקודה ספציפית. האנימציה ממשיכה לפעול אם היא כבר פועלת, ומפסיקה לפעול במקרים אחרים.
- בוחרים את קבוצת האנימציה בחלונית סקירה כללית (כדי שהיא תוצג בקטע פרטים).
חלונית) ומקישים על הלחצן
הפעלה מחדש.
האנימציה תופעל מחדש באזור התצוגה.
לוחצים על 
לחצני מהירות האנימציה בסרגל פקדים כדי לשנות את מהירות התצוגה המקדימה של קבוצת האנימציה שנבחרה.
הצגת פרטי האנימציה
אחרי שיוצרים קבוצת אנימציה, לוחצים עליה מהחלונית סקירה כללית כדי להציג את הפרטים שלה.
בחלונית פרטים, לכל אנימציה מופיעה שורה משלה. כדי לראות את השם המלא של הרכיב התואם, משנים את הגודל של עמודת השם.
מעבירים את העכבר מעל אנימציה כדי להדגיש אותה באזור התצוגה. לוחצים על האנימציה כדי לבחור אותה החלונית Elements (רכיבים).
חלק מהאנימציות חוזרות על עצמן ללא הגבלת זמן אם המאפיין animation-iteration-count שלהן מוגדר ל-infinite. בחלונית אנימציות מוצגות ההגדרות ואיטרציות שלהן.
הקטע הימני והכהה ביותר באנימציה הוא ההגדרה שלה. הקטעים הימניים, דהויים יותר שמייצגים איטרציות.
לדוגמה, בצילום המסך הבא, הקטעים שתיים ושלוש מייצגים של חלק ראשון.
אם בשני רכיבים מוחלת אותה אנימציה, החלונית אנימציות תקצה להם את אותה אנימציה
אותו צבע. הצבע עצמו הוא אקראי ואין לו משמעות. לדוגמה, בצילום המסך למטה
שני הרכיבים div.eye.left::after ו-div.eye.right::after מכילים את אותה אנימציה (eyes)
הוחלו עליהן, וכך גם הרכיבים div.feet::before ו-div.feet::after.
שינוי אנימציות
יש שלוש דרכים לשנות אנימציה בחלונית אנימציות:
- משך הזמן של האנימציה.
- תזמוני תמונות מפתח.
- השהיה עם שעת ההתחלה.
עבור הקטע הזה, נניח שצילום המסך הבא מייצג את האנימציה המקורית:
כדי לשנות את משך הזמן של אנימציה, גוררים את העיגול הראשון או האחרון.
אם האנימציה מגדירה כללי תמונות מפתח כלשהם, הם מיוצגים כעיגולים פנימיים לבנים. כדי לשנות את התזמון של תמונת המפתח, גוררים את אחת מהאפשרויות האלה.
כדי להוסיף עיכוב לאנימציה, לוחצים על האנימציה עצמה, לא על העיגולים, וגוררים אותה לאן שרוצים.
עריכת הגרסה הפעילה של @keyframes
כשמשנים @keyframes בסגנונות, אפשר לראות את האפקטים בחלונית אנימציות מיד.
כדאי לנסות את התכונה בדף ההדגמה הזה:
- פותחים את החלונית אנימציות. התכונה לוכדת באופן אוטומטי את אנימציית הדופק הנוכחית בדף. בוחרים את האנימציה מתחת לפקדים בסרגל הפעולות.
- ב-Elements, בודקים את הרכיב עם
class="pulser", ובקטע סגנונות, מאתרים את הקטע@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)
כדי לערוך את המבנה הזה בElements > סגנונות:
- פותחים את כלי הפיתוח ובודקים דף שהשתמש ב-View Transitions API. לדוגמה, דף ההדגמה הזה.
- בקטע אנימציות, לוחצים על השהיה השהיה.
מפעילים אנימציה בדף. החלונית אנימציות מצלמת את הסרטון ומושהית באופן מיידי. עכשיו אפשר למצוא את המבנה
::view-transitionב-DOM, מעל הרכיב<head>.
בקטע Elements > סגנונות, שינוי ה-CSS של
::view-transitionרכיבים מדומה.ממשיכים את האנימציה ומפעילים מחדש כדי לראות את התוצאה.
מידע נוסף זמין במאמר מעברים פשוטים ופשוטים באמצעות View Transitions API.