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

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 שאפשר ליצור מהם קומפוזיציות. בדף הבית אפשר למצוא השוואה בין שתי הפוליפילים.

יש כמה אפשרויות להשתמש ב-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. במסמך של Eric Willigers מפורטות דוגמאות לשימוש ב-motion-path.