Fx.Matrix
במסגרת העבודה שלי עשיתי מחקר קטן על איך לבצע אפקטים שיגרמו לצאת מהמבנה הריבועי ויאפשרו לשחק עם הצורה של האלמנט עוד קצת. אחרי מס’ חיפושים בגוגל מצאתי שהדפדפן ספארי תומך ב-CSS Transformations ושIE תמך בזה עוד מגרסאות מוקדמות יותר רק בשם אחר: Matrix filter (נתמך החל מ-IE 5.5).
אז גיליתי שתי אפשרויות:
- הדרך של ספארי: להשתמש במאפיין transform אם אחת מהפונקציות הבאות: skew, rotate, translate, scale, perspective ועוד כמה. מוזילה הודיעו שהם גם יתמכו בזה החל מגרסה 3.1 של Firefox.
- הדרך של IE: להשתמש במאפיין filter עם הרכיב: “DXImageTransform.Microsoft.Matrix”, שיכול לקבל מטריצה בגודל 2*2.
בשתי הדרכים ניתן להעביר מטריצה בתור ערך, רק שספארי תומך באפשרות למטריצות גדולות יותר בגדלים של 3*3 ו-4*4 (האחרון ל-3D Projection).
אז גיליתי את הדרך לצאת מהמבנה הריבועי ובקלות, והגיע הזמן לשלב את זה בתוך MooTools, כך שאוכל לעשות אפקטים.
בשלב הראשון ניסיתי, ללא הצלחה, לשלב את זה בתוך Fx.Morph ככה שיהיה אפשר לעשות את האפקט ביחד עם מאפייני CSS נוספים. חסר דוקיומנטציה בחלק הזה. אז החלטתי לעשות את זה בנפרד מ-Fx.Morph ויצרתי מחלקה משלי Fx.Matrix שיורשת מ-FX - גם פה חסר תיעוד, אבל זה כבר קל יותר - ניתחתי את סדר הפונקציות שנקראות והסתכלתי באפקטים שאנשים אחרים יצרו שמצאתי דרך גוגל.
התוצאה היא מחלקת Fx.Matrix שהוספתי אותה לפרוייקט MUI, פרוייקט קוד פתוח שאני עובד עליו קצת פה וקצת שם שמספק רכיבי ממשק משתמש (UI) בעזרת MooTools. המחלקה תומכת בטרנספורמציות הבאות: scale, skewX, skewY, rotate, scaleNonUniform ו-rotateFromVector. אלו הטרנספורמציות היחידות שניתן לעשות גם ב-IE וגם ב-Safari/FF בגלל התמיכה של IE במטריצות רק בגודל 2*2, אז את שאר הפונקציות לא מימשתי - אבל זה נורא פשוט להוסיף אותן.
איך משתמשים במחלקה:
ראשית, יוצרים מופע של המחלקה:
var mfx = new Fx.Matrix(element, options) — all options are the options of Fx class.
עכשיו, ניתן להשתמש במתודה ’set’ שכמו ב-Fx.Morph, גורמת לאלמנט לעשות את הטרנספורמציה המבוקשת בלי אפקט - ישירות. את מטריצת הטרנספורמציה מעבירים למתודה בתור מערך שכולל בתוכו 2 מערכים פנימיים עם שני איברים כל אחד:
mfx.set([[2,0], [0, 2]]);
המטריצה הזאת מייצגת את הפונקציה scale, כלומר, גודל האלמנט יגדל פי 2 לאורך ולרוחב.
דרך יותר מילולית וקריאה לעשות את הקוד היא להשתמש במערך האסוציאטיבי והסטאטי Functions שמכיל בתוכו את כל הפונקציות הנתמכות שתיארתי קודם:
mfx.set( Fx.Matrix.Functions.scale(2) );
בכדי ליצור יותר מטרנספורמציה אחת, ניתן להשתמש במתודה הסטטית prepare של Fx.Matrix שמקבלת את כל הפונקציות שאנחנו רוצים להשתמש בהן בתור אובייקט ליטרלי:
mfx.set( Fx.Matrix.prepare({
scale: [2],
rotate: [30] // 30 degrees
}) );
כל קריאה למתודה ’set’ שומרת את המטריצה שהועברה לתוך ה-Element Storage.
בשביל ליצור אנימצית טרנספורמציה ניתן להשתמש במתודה ’start’ שמקבלת אובייקט ליטרלי כמו המתודה prepare, עם הבדל אחד: ניתן גם להעביר שני ערכים לכל פונקציה: ערך התחלה וערך סיום, וגם רק ערך אחד: ערך הסיום.
mfx.start( {
scale:[1, 2],
skewX: [40],
skewY: [50, 0]
});
המחלקה נבדקה בעזרת ה-demo בIE7/8, פיירפוקס 3.1 בטא 1 על Windows XP SP3 (מכונה וירטואלית) וספארי 3.1.2 על Windows Vista (במחשב בעבודה).
פוסט זה פורסם גם באנגלית בבלוג בבלוגיה של מיקרוסופט בתקווה ש-Ajaxian ימצאו אותו מספיק מעניין ויפרסמו אותו גם. את הפוסט פירסמתי גם ב-digg וב-dzone, אשמח מאוד אם תעזרו לקדם אותו ע”י לחיצה על הקישורים ולהצביע בעד הפוסט 
אם אתם מכירים דרכים לבצע אפקטי 3D בעזרת מטריצה של 2*2, אתם מוצאים באג, דרך לייעל וכן, מצליחים לשלב את זה בתוך Fx.Morph, אשמח אם תתרמו את הקוד בחזרה לפרוייקט שלי.
תודה
ואז יעביר אותנו לרכיב התצוגה (VIEW) או ל-action אחר.