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

Sam Thorogood

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

רקע

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

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

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

Codelabs

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

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

תצוגה מקדימה של תוצאת ה-Codelab

אם זו רק ההתחלה שלכם, זה המקום בשבילכם.

הדגמות

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

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

פוליפיל

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

אם אתם רוצים להתנסות, תוכלו להשתמש ב-polyfill של web-animations-next, שכולל גם תכונות שעדיין לא הושלמו – כמו ה-constructors GroupEffect ו-SequenceEffect שאפשר ליצור מהם קומפוזיציות. בדף הבית אפשר למצוא השוואה בין שני ה-polyfills.

יש כמה אפשרויות להשתמש ב-polyfill בקוד.

  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.

דן ווילסון (Dan Wilson) כתב גם מקבץ מצוין של פוסטים בנושא אנימציות אינטרנט, כולל הסבר על השימוש בהן לצד המאפיין החדש של CSS‏ motion-path. דוגמאות לשימוש ב-motion-path מפורטות במסמך של Eric Willigers.