ה-Web Animations API מספק פרימיטיבים חזקים לתיאור אנימציות אימפרטיביות מ-JavaScript – אבל מה זה אומר? כדאי לעיין במקורות המידע שזמינים לכם, כולל הדגמות וסדנאות קוד של Google.
רקע
ה-method העיקרי ב-API הוא Element.animate().
הנה דוגמה שבה צבע הרקע משתנה מאדום לירוק:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
השיטה הזו נתמכת בכל הדפדפנים המודרניים, עם פוליפיל גיבוי מצוין (עוד על כך בהמשך). תמיכה מקורית בשיטה הזו – ובאובייקט הנגן שלה – הפכה לזמינה באופן נרחב כחלק מ-Chrome 39. היא זמינה גם באופן מובנה ב-Opera, ועדיין בפיתוח עבור Firefox. זו פרימיטיב רב-עוצמה שכדאי לכלול בארגז הכלים שלכם.
Codelabs
יש מספר הולך וגדל של שיעורי Codelab שזמינים ל-Web Animations API. אלה מדריכים שמתאימים לקצב האישי שלכם ומדגימים מושגים שונים ב-API. ברוב ה-codelab האלה, תיקחו תוכן סטטי ותשפרו אותו באמצעות אפקטים של אנימציה.
ה-codelabs האלה, וקישורים או מקורות מידע קשורים, הם המקום הכי טוב להתחיל בו אם אתם רוצים להבין את הפרימיטיבים החדשים שזמינים לכם ב-Web Animations. כדי לקבל רעיון לגבי מה שאפשר ליצור, כדאי לעיין באפקט החשיפה הזה בהשראת Android:
אם אתם רק מתחילים, הגעתם למקום הנכון.
הדגמות
אם אתם מחפשים השראה, כדאי לעיין בהדגמות של אנימציות לאתרים שנוצרו בהשראת Material, עם קוד מקור שמתארח ב-GitHub. ההדגמות האלה מציגות מגוון של אפקטים מדהימים, ואפשר לראות את קוד המקור של כל הדגמה בתוך הדף.
ההדגמות כוללות גלקסיה צבעונית מסתובבת, כדור הארץ מסתובב, או אפילו רק מגוון אפקטים על רכיב רגיל.
Polyfill
כדי להבטיח תמיכה מצוינת בכל הדפדפנים המודרניים, אפשר להשתמש בספריית polyfill. Web Animations API כולל polyfill שזמין כבר עכשיו ומאפשר להשתמש בו בכל הדפדפנים המודרניים, כולל Internet Explorer, Firefox ו-Safari.
אם אתם רוצים לנסות משהו חדש, אתם יכולים להשתמש ב-polyfill של web-animations-next, שכולל גם תכונות שעדיין לא סיימנו לפתח – כמו בנאי GroupEffect ו-SequenceEffect שאפשר להרכיב.
בדף הבית אפשר לראות השוואה בין שני הפוליפילים.
יש כמה אפשרויות לשימוש ב-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.
דן וילסון כתב גם סדרה מצוינת של פוסטים על Web Animations, כולל הסבר על השימוש בה לצד המאפיין החדש motion-path של CSS.
דוגמאות לשימוש ב-motion-path מופיעות במסמך של Eric Willigers.