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

אריק בידלמן

Twitter GitHub דף הבית

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

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

1. אפשר להשתמש בתמונות CSS sprites כדי לעדכן background-position ב-JS .
2. פריצות עם .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, שהיא תמיד חלקה וחלקה.

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

הדגמה

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

ראשית, במקום לציין כתובת 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);

הערה: השיטה הזו פועלת באובייקט document ולא באזור העריכה. הארגומנט השני הוא אותו השם שמופיע ב--webkit-canvas().

מידע נוסף מאת Dave Hyatt:

הערה: לכל מסמך יש רק דף עריכה אחד ב-CSS לכל מזהה גלובלי. כשמתקבלים ההקשר של הציור, מציינים גם את הגודל. ההדפסה על קנבס לא תימחק כל עוד מבקשים שוב ושוב את אותו גודל. ציון גודל חדש שווה ערך להתנהגות הרצויה אם משנים את הגודל של רכיב <canvas>, כך שמאגר הנתונים הזמני של אזור העריכה יימחק.

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

אנימציות

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

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

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

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

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

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

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

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

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

גישות נוספות

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