Web Animations API, שנשלח לראשונה ב-Chrome 36, מספק שליטה נוחה באמצעות JavaScript באנימציות בדפדפן, ומוטמע גם ב-Gecko וב-WebKit.
ב-Chrome 50 השקנו שינויים כדי לשפר את יכולת הפעולה ההדדית עם דפדפנים אחרים ולהתאים יותר למפרט. השינויים הבאים:
- ביטול אירועים
Animation.id- שינוי מצב ל-method
pause() - הוצאה משימוש של שמות מקווקוים כמפתחות בתמונות מפתח
בגרסה 51 של Chrome, חלק מהשינויים האלה הושלמו:
- הסרת שמות מקווקוים כמפתחות בתמונות מפתח
ביטול אירועים
ממשק האנימציה כולל שיטה לביטול אנימציה, שנקראת cancel() בצורה מצחיקה למדי.
Chrome 50 מטמיע את ההפעלה של אירוע הביטול כשהשיטה נקראת
בהתאם למפרט, ומפעיל את הטיפול באירועים באמצעות
המאפיין oncancel אם הוא הופעל.
תמיכה עבור Animation.id
כשיוצרים אנימציה באמצעות element.animate(), אפשר להעביר מספר מאפיינים. לדוגמה, לפניכם דוגמה להמחשת השקיפות של אובייקט:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
אם מציינים את המאפיין id, הוא יוגדר באובייקט האנימציה שיוחזר, והרכיב הזה יכול לעזור בניפוי באגים בתוכן כשיש הרבה אובייקטים של
אנימציה שצריך לטפל בהם. הנה דוגמה לאופן שבו מציינים id לאנימציה שיוצרים:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
שינוי מצב בשיטת pause()
משתמשים ב-method pause() כדי להשהות אנימציה באמצע התהליך. אם בודקים את מצב האנימציה באמצעות המאפיין playState, צריך להגדיר אותו לערך paused אחרי הקריאה ל-method paused(). בגרסאות Chrome שקודמות לגרסה 50,
המאפיין playState
יציין שidle אם האנימציה עדיין לא התחילה, אבל עכשיו הוא משקף את המצב הנכון, שהוא
paused.
הסרת שמות מקווקוים כמפתחות בתמונות מפתח
כדי לשמור על תאימות למפרט ולהטמעות נוספות, מערכת Chrome 50 שולחת אזהרה למסוף במקרה של שימוש בשמות מקווקוים למפתחות באנימציות של תמונות מפתח. המחרוזות הנכונות לשימוש הן שמות CamelCase, בהתאם לנכס ה-CSS למאפיין IDL לאלגוריתם ההמרה.
לדוגמה, מאפיין ה-CSS margin-left ידרוש מכם להעביר את marginLeft כמפתח.
ב-Chrome 51 אין יותר תמיכה בשמות מקווקוים, לכן זה הזמן לתקן כל תוכן קיים עם שמות נכונים, בהתאם למפרט.
סיכום
השינויים האלה מקרבים את ההטמעה של האנימציות באינטרנט ב-Chrome להטמעות של דפדפנים אחרים, ומתאימים יותר למפרט. כך אפשר לפשט את כתיבת התוכן בדפי אינטרנט ולשפר את יכולת הפעולה ההדדית.