אפקטים ב-MooTools

הסבר על אנימציה ואפקטים באמצעות MooTools

במאמר הקודם למדנו על אירועים ו-style ב-MooTools. במאמר הזה אנו נלמד על איך עושים אפקטים באמצעות MooTools.

באופן עקרוני, יש לנו שני classים שמשמשים אותנו ליצירת אפקטים. הראשון הוא tween שמסייע לנו ליצור שינוי בתכונה אחת והשני הוא morph שמסייע לנו ליצור שינוי בכמה תכונות. שני ה-classים יורשים את התכונות שלהם מ-class אב שנקרא Fx.

Tween

בואו וניצור אפקט בסיסי ב-Tween. ראשית אנו ניצור אובייקט של tween (שיורש, כאמור מ-Fx) ואחרי כן נשתמש במתודת start על מנת להתחיל את האפקט.


	var el  = $('myDiv');
	var myFx = new Fx.Tween(el, {duration: 'long'});
	myFx.start('background-color', '#f00', '#00f');

ראשית אנו בוחרים באלמנט שלנו (div עם id של myDiv). לאלמנט הזה ניתן רפרנס ששמו בישראל הוא el.
שנית, אנו יוצרים את האובייקט שלנו. הקונסטרקטור מקבל כאן שני פרמטרים, הראשון הוא האלמנט שלנו והשני הוא אובייקט של אפשרויות שונות. במקרה הזה הכנסתי אפשרות של duration שהערך שלה הוא long. אפשרות זו אומרת שהאנימציה תתרחש במשך 1000 שניות.
להלן האפשרויות שניתן להכניס:
1. duration: אפשר להכניס מילישניות או לבחור short (250), normal (500), long (1000). כשהדפולט הוא normal.
2. fps מספר הפריימים לשניה של האנימציה (הדפולט הוא 50).
3. link שיכולה להיות ignore, cancel או chain (הדפולט הוא ignore). זו תכונה שקובעת מה יקרה לאנימציה אם נשלחת בקשה נוספת ל-start בזמן שהוא רץ. ignore פשוט תתעלם מכל בקשה כזו, chain תבצע את הבקשה אחרי שהאנימציה הראשונה תסתיים ו-cancel תבטל את האנימציה הנוכחית.
4. unit יכול להיות false, px' % או em. זה חשוב אם אנחנו רוצים לבצע אנימציה הכוללת שינויים בגודל פיסי ולא רוצים להעביר את היחידה בשינוי שלנו.
5. transition – בחירה שונה של transition (מידע נוסף בתחתית המאמר).

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

HELLO

יש גם לכל אלמנט MooTools תכונה בשם tween שאפשר לשלוט עליה באופן עצמאי. כלומר במקום ליצור אובייקט של אפקטים, להצמיד את תכונות ה-tween ישירות לאובייקט באמצעות set רגיל. הנה הדוגמא:


	var el  = $('myDiv2');
	el.set('tween', {duration: 'long'});
	el.tween('color', '#000', '#f00');

הקוד הוא מאד פשוט וכמעט זהה לדוגמא מלמעלה. ראשית אני בוחר את האלמנט שלי ואז אני מבצע לו set לתכונה בשם tween. אני מעביר את האפשרויות (במקרה הזה duration) ויוצר את האנימציה עם מתודת tween.

HELLO

חוץ ממתודת tween יש לנו עוד שתי מתודות שאפשר להפעיל ישירות על האלמנט. הראשונה היא מתודת fade שכשמה כן היא, היא הופכת את האלמנט לשקוף (או לשקוף חלקי).


	var el  = $('myDiv3');
	el.fade(0.7);

הקוד הזה הופך את האלמנט ל-70 אחוז שקוף. מתודת fade מקבלת כמה פרמטרים:

1. in – מקביל ל-100 אחוז נראות.
2. out מקביל ל-0 אחוז נראות.
3. show מקביל ל-100 אחוז נראות ומתבצע מיידית.
4. hide מקביל ל-0 אחוז נראות ומתבצע מיידית.
5. toggle מבצע in ו-out.
6. מספר בין 0 ל-1 כמו בדוגמא.

והנה דוגמא שעובדת:

HELLO

כמו fade ישנה גם מתודה שנקראת highlight וכל מה שהיא עושה זה לשנות את צבע הרקע בהבזק – בדיוק כמו השם שלה.

הנה הדוגמא:

HELLO

והנה הקוד:


function highlightMe() {
	var el  = $('myDiv4');
	el.highlight('#00f', '#f00');
}

אין כל כך מה להוסיף פה. המתודה highlight מקבלת שני פרמטרים – צבע התחלתי וצבע סופי.

Morph

Morph משמש אותנו לשינוי כמה תכונות CSS. גם Morph class יורשת מ-FX class מה שהופך אותה לדומה יחסית ל-tween. בואו נתחיל לעשות קצת מורפינג. תלחצו על הכפתור הבא:

HELLO

אנו רואים שה-div החביב שינה את הגובה וגם את הרוחב שלו – כלומר שתי תכונות שהשינוי שלהם נעשה במקביל. את הפלא הקטן הזה עשיתי, כאמור, עם Morph. בואו נסתכל על הפונקציה:


	var el  = $('myDiv5');
	var myFx = new Fx.Morph(el, {duration: 'long'});
	myFx.start({'height': [100, 200],'width': [100, 200]});

בשורה הראשונה אני בוחר אלמנט (במקרה הזה myDiv5). בשורה השניה אני יוצר אובייקט Morph. הקונסטרקטור מקבל שני ארגומנטים, את האלמנט ואפשרויות שזהות לחלוטין לאפשרויות של Tween שאותם תיארתי לעיל.
לבסוף, מתודת start מבצעת את השינוי, שימו לב לאובייקט התכונות שהכנסתי כאשר לכל תכונה יש ערך התחלה וערך סיום. זה הכל!

כמו ב-tween אני יכול להשתמש במתודה טבעית שיש בכל אלמנט שנקראת morph. למשל:


	var el  = $('myDiv6');
	el.morph({height: [100, 200], width: [100, 200]});

הקוד הזה גם הוא מייצר morph אבל באמצעות מתודה שיש בכל אלמנט. הנה הדוגמא העובדת:

HELLO

במקום התכונות אפשר להעביר גם class, למשל:


$('myElement').morph('.class1');

Transitions

באפשרויות של tween ושל morph אנו יכולים לבחור transition, כלומר אנימציה שהיא לאו דווקא ליניארית או sine (שזה הסוג שבו אנו משתמשים). כיוון שמדובר בחומר שפחות רלוונטי למשתמשים מתחילים, ניתן להתרשם מסוגי ה-Transitions בדוקומנטציה של MooTools.

במאמר הבא אנו נדון ב-AJAX באמצעות MooTools.