Web Animations API מספק רכיבים בסיסיים חזקים לתיאור אנימציות מחייבות מ-JavaScript – אבל מה המשמעות של זה? למידע נוסף על המשאבים שעומדים לרשותכם, כולל הדגמות ו-codelabs של Google.
רקע
בבסיסו ה-API מספק את ה-method Element.animate().
בואו נראה דוגמה, שבה צבע הרקע עובר אנימציה מאדום לירוק:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
השיטה הזו נתמכת בכל הדפדפנים המודרניים, עם חלופה נהדרת של polyfill (פרטים נוספים בהמשך). התמיכה המובנית בשיטה הזו – ובאובייקט הנגן שלה – הפכה לזמינה לציבור הרחב כחלק מ-Chrome 39. הוא זמין גם באופן מקורי ב-Opera, ובפיתוח פעיל ב-Firefox. זוהי פונקציה פרימיטיבית חזקה שמגיע לה מקום בכלי העבודה שלכם.
Codelabs
יש יותר ויותר מעבדי Codelabs זמינים ל-Web Animations API. מדריכים ללמידה עצמית שממחישים מושגים שונים ב-API. ברוב הקודלאבים האלה תעבדו על תוכן סטטי ותוסיפו לו אפקטים של אנימציה.
הקודלאבים האלה והקישורים או המשאבים הקשורים הם המקום הטוב ביותר להתחיל בו אם אתם רוצים להבין את הפרימיטיבים החדשים שזמינים לכם ב-Web Animations. כדי לקבל מושג לגבי מה שאפשר ליצור, כדאי לעיין באפקט החשיפה הזה בהשראת Android:
אז אם רק התחלתם, לא צריך לחפש יותר!
הדגמות
אם אתם מחפשים השראה, מומלץ לצפות בהדגמות של אנימציות באינטרנט בהשראת Materials, שהמקור מתארח ב-GitHub. הדגמות האלה כוללות מגוון אפקטים מדהימים, ואפשר לראות את קוד המקור של כל הדגמה בתוך הדף.
הדגמות כוללות גלקסיה צבעונית מסתובבת, כדור הארץ מסתובב או אפילו מגוון אפקטים על רכיב פשוט.
פוליפיל
כדי להבטיח תמיכה מעולה בכל הדפדפנים המודרניים, אפשר להשתמש בספריית polyfill. ב-Web Animations API יש polyfill זמין כרגע שמביא אותו לכל הדפדפנים המתקדמים, כולל Internet Explorer, Firefox ו-Safari.
אם אתם רוצים להתנסות, תוכלו להשתמש ב-polyfill של web-animations-next, שכולל גם תכונות שעדיין לא הושלמו – כמו ה-constructors GroupEffect ו-SequenceEffect שאפשר ליצור מהם קומפוזיציות.
בדף הבית אפשר למצוא השוואה בין שני ה-polyfills.
יש כמה אפשרויות להשתמש ב-polyfill בקוד.
להשתמש ב-CDN, כמו cdnjs, jsDelivr או לטרגט גרסה ספציפית באמצעות rawgit.com
התקנה דרך NPM או Bower
$ npm install web-animations-js $ bower install web-animations-js ```
בכל המקרים, אפשר פשוט לכלול את ה-polyfill בתג סקריפט לפני כל קוד אחר.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
משאבים אחרים
למידע נוסף, מומלץ לקרוא את המפרט של W3C.
דן ווילסון (Dan Wilson) כתב גם מקבץ נהדר של פוסטים בנושא אנימציות אינטרנט, כולל הסבר על השימוש בהן לצד הנכס החדש motion-path ב-CSS.
דוגמאות לשימוש ב-motion-path מפורטות במסמך של Eric Willigers.