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

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

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

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

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

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

יש שתי בעיות עם זה:

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

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

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

הדגמה של Canvas כרקע
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);

מידע נוסף מדייב הייאט:

אנימציות

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

ההדגמה לא מונפשת ב-Chrome?

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

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

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

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

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

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

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

גישות אחרות

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