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