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. ברוב ה-codelabs האלה, תקחו תוכן סטטי ותשפרו אותו באמצעות אפקטים של אנימציה.
Codelabs וקישורים או משאבים קשורים הם המקום הכי טוב להתחיל בו אם אתם רוצים להבין את העקרונות החדשים שזמינים לכם בתכונה 'אנימציות באינטרנט'. כדי לקבל רעיון מה תוכלו לפתח, תוכלו להיעזר באפקט החשיפה הזה בהשראת Android
אז אם רק התחלתם, לא צריך לחפש יותר!
הדגמות
אם אתם מחפשים השראה, מומלץ לצפות בהדגמות של אנימציות באינטרנט בהשראת Materials, שהמקור מתארח ב-GitHub. האפקטים האלה מדגימים מגוון של אפקטים מדהימים, וניתן לראות את קוד המקור של כל הדגמה בנפרד.
ההדגמות כוללות גלקסיה מסתובבת צבעונית, כדור הארץ מסתובב או אפילו מגוון אפקטים על יסוד ישן ופשוט.
פוליפיל
כדי להבטיח תמיכה מעולה בכל הדפדפנים המתקדמים, אפשר להשתמש בספריית polyfill. ב-Web Animations API יש polyfill זמין כרגע שמביא אותו לכל הדפדפנים המתקדמים, כולל Internet Explorer, Firefox ו-Safari.
אם רוצים לצאת להרפתקה, אפשר להשתמש ב-polyfill הבא של האנימציות באינטרנט, שכולל גם תכונות שעדיין לא הסתיימו, כמו הבנאים הקומפוזביליים GroupEffect ו-SequenceEffect.
השוואה בין שני סוגי הנתונים המשולבים (polyfill) זמינה בדף הבית.
יש כמה אפשרויות לשימוש ב-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.
דן ווילסון גם כתב אוסף פוסטים נהדר על אנימציות באינטרנט, כולל הסבר על השימוש בו לצד הנכס החדש של שירות ה-CSS motion-path.
לקבלת חלק מהדוגמאות באמצעות motion-path, יש לעיין במסמך של אריק וויליגרס.