אנימציות: בדיקה ושינוי של אפקטים של אנימציות של CSS

Sofia Emelianova
Sofia Emelianova

אפשר לבדוק ולשנות אנימציות באמצעות כרטיסיית ההזזה אנימציות של כלי הפיתוח ל-Chrome.

סקירה כללית

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

לכרטיסייה אנימציות יש שתי מטרות עיקריות:

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

הכרטיסייה אנימציות תומכת באנימציות CSS, מעברי CSS, אנימציות אינטרנט ו-View Migration API. אין עדיין תמיכה באנימציות של requestAnimationFrame.

מהי קבוצת אנימציה?

קבוצת אנימציה היא קבוצה של אנימציות שנראות קשורות זו לזו.

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

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

תחילת העבודה

יש שתי דרכים לפתוח את הכרטיסייה אנימציות:

  • בוחרים באפשרות עוד. התאמה אישית ושליטה בכלי הפיתוח > כלים נוספים > אנימציות. אנימציות בתפריט.
  • פותחים את תפריט הפקודות על ידי הקשה על אחת מהאפשרויות הבאות:

    • ב-macOS: Command+Shift+P
    • ב-Windows, ב-Linux או ב-ChromeOS: Control+Shift+P

    אחר כך מתחילים להקליד Show Animations ובוחרים בחלונית ההזזה המתאימה. הצגת אנימציות.

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

כרטיסיית אנימציות ריקה.

בכרטיסייה אנימציות יש ארבעה קטעים עיקריים:

הקטעים בחלונית 'אנימציות'.

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

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

בדיקת האנימציות

יש כמה דרכים להפעיל מחדש אנימציה כשמצלמים אותה:

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

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

הצגת פרטי האנימציה

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

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

החלונית 'פרטים'.

מעבירים את העכבר מעל אנימציה כדי להדגיש אותה באזור התצוגה. לוחצים על האנימציה כדי לבחור אותה בחלונית Elements.

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

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

איטרציות אנימציה.

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

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

תרשים של איטרציות אנימציה.

אם הוחלה אנימציה זהה על שני אלמנטים, הכרטיסייה אנימציות תקצה להם את אותו הצבע. הצבע עצמו הוא אקראי ואין לו משמעות. לדוגמה, בצילום המסך שלמטה שני הרכיבים div.eye.left::after ו-div.eye.right::after מבצעים את אותה אנימציה (eyes), וכך גם הרכיבים div.feet::before ו-div.feet::after.

אנימציות בקידוד צבע.

שינוי אנימציות

יש שלוש דרכים לשנות אנימציה באמצעות הכרטיסייה אנימציות:

  • משך הזמן של האנימציה.
  • תזמון תמונות מפתח.
  • השהיה של זמן ההתחלה.

בקטע הזה, נניח שצילום המסך הבא מייצג את האנימציה המקורית:

האנימציה המקורית לפני השינוי.

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

משך הזמן השתנה.

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

שיניתם את תמונת המפתח.

כדי להוסיף השהיה לאנימציה, לוחצים על האנימציה עצמה ולא על המעגלים, ואז גוררים אותה למקום כלשהו.

השהיה לאחר שינוי.

עריכת הפסאודו-רכיבים של ::view-transition במהלך אנימציה

באמצעות View Migrates API אפשר לשנות את ה-DOM בשלב אחד וליצור מעבר מונפש בין שני המצבים. במהלך אנימציה, ה-API בונה עץ פסאודו-אלמנטים עם המבנה הבא:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

כדי לערוך את המבנה הזה דרך רכיבים > סגנונות:

  1. פותחים את כלי הפיתוח ובודקים דף שהשתמשו ב-View Migrates API. לדוגמה, דף ההדגמה הזה.
  2. בקטע אנימציות, לוחצים על השהיה השהיה.
  3. בדף, מפעילים אנימציה. בחלונית אנימציות הן מצולמות, ומשהה מיידית. עכשיו אפשר למצוא את המבנה של ::view-transition ב-DOM, מעל לרכיב <head>.

    עריכת ה-CSS של ::view-transition פסאודו-רכיב.

  4. בקטע רכיבים > סגנונות, משנים את ה-CSS של ::view-transition פסאודו-רכיבים.

  5. ממשיכים את האנימציה ומפעילים אותה מחדש כדי לראות את התוצאה.

מידע נוסף זמין במאמר מעברים חלקים ופשוטים בעזרת View Migrates API.