תמונות רקע שמבוססות על לוח הציור

אנימציה פרוגרמטית של תמונות רקע

יש שתי דרכים עיקריות שבהן אנשים יוצרים אנימציה לתמונות רקע:

  1. שימוש ב-CSS sprites כדי לעדכן background-position ב-JS .
  2. Hacks עם .toDataURL() .

האפשרות הראשונה עובדת מצוין אם יש לכם את התמונה מראש, אבל מה קורה אם צריך ליצור את המקור באופן פרוגרמטי, למשל באמצעות <canvas>? הפתרון לבעיה מס' 1 הוא להשתמש ב-.toDataURL() בבד הציור ולהגדיר את הרקע לכתובת ה-URL שנוצרה:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

יש לכך שתי בעיות:

  1. כתובות URL מסוג data: מוסיפות כ-33% לעומס העל של התמונה שנוצרת.
  2. הרבה פעולות על DOM (el.style).

שתי השיטות האלה לא יעילות: הן לא מתאימות לאפליקציית אינטרנט שתמיד תפעל בצורה חלקה ב-60fps.

שימוש בלוח ציור דו-מימדי כרקע

הדגמה של שימוש בבד לייבלים כרקע
DEMO

מסתבר שיש ממשק API לא סטנדרטי ש-WebKit השתמש בו כבר שנים, שיכול להשתמש ב-canvas כמקור לרקע. למרבה הצער, לא פורסמו מפרטים של התכונה הזו.

קודם כול, במקום לציין כתובת URL ללחצן 'הקודם':

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

משתמשים ב--webkit-canvas(), שמפנה למזהה מחרוזת להקשר של לוח הציור:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

בשלב הבא, צריך ליצור את ההקשר הדו-מימדי באמצעות גרסה מיוחדת של .getContext():

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

מידע נוסף מ-Dave Hyatt:

אנימציות

כפי שרואים בהדגמה, אפשר להשתמש שוב ב-requestAnimationFrame() כדי להפעיל אנימציה. זה מצוין, כי אחרי שמחברים את הדברים, השיוך בין CSS לבין רכיב הקנבס נשמר. אין צורך להתעסק ב-DOM.

הדגמה לא מציגה אנימציה ב-Chrome?

בערוץ היציב הנוכחי של Chrome (גרסה 23) יש את הבאג crbug.com/161699, שגורם לכך שאנימציה של requestAnimationFrame() לא מעדכנת את הרקע כראוי. הבעיה תוקנה בגרסה 25 של Chrome (גרסה Canary הנוכחית). ההדגמה אמורה לפעול היטב גם בגרסה הנוכחית של Safari.

יתרונות בביצועים

אנחנו מדברים על קנבס. אנימציות שמואצות בחומרה זמינות עכשיו באופן מלא (לפחות בדפדפנים שבהם התכונה הזו פועלת). רצינו רק להדגיש שוב: אין צורך להטריד את ה-DOM מ-JS.

שימוש ב-WebGL כרקע

רגע, האם פירוש הדבר שאפשר להפעיל רקע CSS באמצעות webgl? כמובן שכן! WebGL הוא רק הקשר תלת-ממדי לקנבס. פשוט מחליפים את 'experimental-webgl' במקום '2d', וזהו.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

הנה הוכחת קונספט שמכילה div עם רקע שמצויר באמצעות שגיאות צבע של קודקודים ושברים: DEMO

גישות אחרות

חשוב לציין של-Mozilla יש את -moz-element() (MDN) כבר זמן רב. האפשרות הזו היא חלק מהמפרט של CSS Image Values and Replaced Content Module Level 4, ומאפשרת ליצור תמונה שנוצרה מ-HTML שרירותי: סרטונים, קנבס, תוכן DOM וכו'. עם זאת, יש חששות אבטחה לגבי גישה מלאה לתמונות של קובצי snapshot של DOM. זו הסיבה העיקרית לכך שדפדפנים אחרים לא אימצו את התכונה הזו.