משאבים בנושא אנימציות באינטרנט

ממשק ה-API של אנימציות באינטרנט מספק תוספות חזקות לתיאור אנימציות חיוניות מ-JavaScript - אך מה זה אומר? לומדים על המשאבים שעומדים לרשותכם, כולל הדגמות ו-Codelabs של Google.

רקע

בעיקרון, ה-API מספק את השיטה Element.animate(). בוא נראה דוגמה, שממחישה את צבע הרקע מאדום לירוק-

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

שיטה זו נתמכת בכל הדפדפנים המודרניים, עם גיבוי polyfill מצוין (בהמשך נרחיב בנושא). תמיכה מובנית בשיטה הזו – ובאובייקט הנגן שלה – הפכו לזמינים לכולם כחלק מ-Chrome 39. הוא זמין גם באופן מקומי ב-Opera, ונמצא בפיתוח פעיל עבור Firefox. זהו פרימיטיב חזק שמגיע לך מקום בארגז הכלים.

Codelabs

יותר ויותר מעבדות קוד זמינות ל-Web Animations API. אלו מדריכים ללימוד עצמי שמדגימים מושגים שונים ב-API. ברוב ה-Codelabs האלה תשתמשו בתוכן סטטי ותשפרו אותו באמצעות אפקטים של אנימציה.

ה-codelabs האלה, וקישורים או משאבים קשורים, הם המקום הטוב ביותר להתחיל בו אם אתם רוצים להבין את הפרימיטיבים החדשים שזמינים לכם באנימציות באינטרנט. כדי לקבל רעיון על מה שאפשר ליצור, כדאי לבדוק את אפקט החשיפה הזה בהשראת Android:

אז אם רק התחלתם, כדאי לכם להמשיך בתהליך!

הדגמות

אם אתם מחפשים השראה, אל תשכחו לצפות בהדגמות של אנימציות באינטרנט בהשראת חומרים חדשים, שמתארחים ב-GitHub במקור. הם מדגימים מגוון של אפקטים מדהימים, וניתן לראות את קוד המקור של כל הדגמה בתוך השורה.

ההדגמות כוללות גלקסיה מסתובבת צבעונית, כדור הארץ מסתובב או אפילו רק מגוון אפקטים על אלמנט ישן פשוט.

פוליפיל

כדי להבטיח תמיכה מעולה בכל הדפדפנים המודרניים, ניתן להשתמש בספריית polyfill. ממשק ה-API של אנימציות באינטרנט כולל Polyfill זמין כרגע שמביא אותו לכל הדפדפנים המודרניים, כולל Internet Explorer, Firefox ו-Safari.

אם יש לך רוח הרפתקנית, אפשר להשתמש ב-Polyfill של אנימציות אינטרנט נוספות, שכולל גם תכונות שעדיין לא הוכרזו - כמו הבנאים של GroupEffect ו-SequenceEffect שניתן להרכיב. להשוואה בין שני רכיבי ה-Polyfill, אפשר לעיין בדף הבית.

כדי להשתמש באחד מה-polyfills שבקוד שלכם, עומדות לרשותכם מספר אפשרויות.

1. להשתמש ב-CDN, כמו cdnjs, jsDelivr או לטרגט גרסה ספציפית דרך rawgit.com

2. התקנה באמצעות 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, כדאי לעיין במסמך של אריק וויליגרס.