בכדי ליצור אפקט ב-MooTools צריך להבין ראשית כל מה קורה מאחורי הקלעים כאשר מתבצע אפקט.
1.יוצרים מופע של מחלקת האפקט – בעת היצירה נקבע התדירות (duration) של האפקט שקובעת את גודל הצעד וכן את זמן ההתקדמות (fps) . שני הגדלים נקבעים ע”י ערכי ברירת מחדל או ע”י העברתו בתוך האובייקט options בפרמטר היחידי של הבנאי של מחלקת Fx.
2.קוראים למתודה start עם ערכי from ו-to, במידה ו-from לא הוגדר, המערכת ,תקבע בעצמה from או שלא תעשה כלום (כלומר המתודה start לא נדרסה).
3.המתודה startTimer נקראת ומייצרת interval על המתודה step שעובדת לפי נוסחא המתבססת על ה-fps שנקבע באיתחול המופע (סעיף 1). בנוסף מוגדר זמן התחלה בתוך משתנה this.time שערכו הוא הזמן הנוכחית – התדירות שנקבעה.
4.המתודה step :
1.מחשבת את אורך הצעד (delta) לפי נוסחת transition המוגדרת בברירת מחדל באובייקט options של Fx או לפי נוסחא שהועברה באובייקט options לבנאי (נוסחאות trnsitions מוגדרות מראש ניתן למצוא במחלקה Fx.Transitions).
2.מחשבת באמצעות הפונקציה compute את הערכים שאליהם הפונקציה אמורה להגיע .
3.משימה אותם בעזרת הפונקציה set שמקבלת את הערך הסופי של הצעד.
עכשיו שהידע בידינו על כל התהליך, ניתן ליצור את האפקט בעצמינו (דוגמא על Fx.Matrix המחלקה שכתבתי עליה בפוסט הקודם)
1.ניצור מחלקה היורשת את המחלקה Fx ונקבע שהבנאי יקבל את האלמנט שעליו פועלים ואת אובייקט ה-options.
Fx.Matrix = new Class({
Extends: Fx,
initialize: function (element, options) {
this.parent(options);
this.element = element;
},
2.נדרוס את המתודה set כך שתקבל את הערך העכשווי (=המטריצה) בתור פרמטר ותשמור אותו לתוך ה-Element Storage ותקבע אותו לאלמנט לפי הדפדפן.
set: function (matrix) {
if (Browser.Engine.trident) {
if(!this.element.filters[”DXImageTransform.Microsoft.Matrix”]) {
this.element.style.filter = (this.element.style.filter?'’:’ ‘ )
+ “progid:DXImageTransform.Microsoft.Matrix(M11=’1.0′, sizingMethod=’auto expand’)”;
}
$extend(this.element.filters[”DXImageTransform.Microsoft.Matrix”], {
M11: matrix[0][0],
M12: matrix[0][1],
M21: matrix[1][0],
M22: matrix[1][1]
});
} else {
var propName = Browser.Engine.gecko?”-moz-transform”:”webkitTransform”;
this.element.setStyle(propName, “matrix(”+matrix.flatten().join(”,”)+”,0,0)”);
}
this.element.store(’matrix’, matrix);
},
3.נדרוס את המתודה compute, כך שתקבל שתי מטריצות (from ו-to) ואת ה-delta ותחזיר לנו את מטריצת הביניים. MooTools מספקים פונקציית compute סטטית Fx.compute שיודעת להחזיר את ערך הביניים של שני מספרים לפי הדלתא שמועברת להם.
compute: function (from, to, delta) {
var a = [[],[]];
for(var i=0;i<2;i++){
for(var j=0;j<2;j++){
a[i][j] = Fx.compute(from[i][j], to[i][j], delta);
}
}
return a;
},
4.נדרוס את המתודה start כך שתוכל לקבל ערך אחד של props ותחשב את ערך ה-to לפי הנתונים שבה, ואת ערך ה-from לפי המטריצה הקיימת על האלמנט כבר (לפי ה-Element Storage) ולפי הערכים ב-props. ולבסוף קוראים ל-this.paretn שיתחיל באמת את האפקט לפי התרחיש שהסברתי למעלה.
הערה: אני משתמש במתודה סטטית בשם prepare בשביל שיהיה אפשר להשתמש בה גם כאשר קובעים מטריצה סטטית בעזרת הפונקציה set.
start: function (props) {
var from = this.element.retrieve(’matrix’, 0),
to = 0;
var prep = Fx.Matrix.prepare(from, to, props);
return this.parent(prep.from, prep.to);
}
});
.