# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > MooTools >  آموزش: متحرک سازی در MooTools

## امیـرحسین

توابع متحرک سازی یا به اصطلاح Fx در MooTools خیلی خوب و منسجم توسط کلاس Fx ایجاد میشن و از این لحاظ خوب هستند که همه اشون این کلاس رو Extend می کنند و روش استفاده اشون یکیه.

کلاسهای زیادی برای متحرک سازی ساخته شده اند ولی دوتاشون در هسته MooTools قرار گرفته اند به نام Fx.Tween و Fx.Morph.
Fx.Tween برای تغییر *یک* مشخصه CSS از مقداری به مقدار دیگه است و Fx.Morph کاملا مشابه عمل می کنه ولی برای مشخصه های CSS بیشتر.

مثال:
var element = document.id('myDiv');


// Fx.Tween
var tween = new Fx.Tween(element);
tween.start('height', 100, 200); // Transitions height from 100px to 200px
tween.start('width', 200); // Transitions width from current to 200px

// Fx.Morph
var morph = new Fx.Morph(element);
morph.start({
	height : [200, 300], // Transitions height from 100px to 200px
	width : 200 // Transitions width from current to 200px
});


همونطور که گفتم این دو تا کلاس Fx رو توسعه دادند و همه خصوصیات اون رو به ارث میبرند. خصوصیات خود Fx به این شرح هستند:

*مشخصه ها*. این مشخصه ها رو باید به عنوان یک Object به پارامتر دوم، به متد اصلی کلاس بدیم:
*fps*: تعداد فریمها بر ثانیه. پیشفرض 50.*unit*: واحد مورد استفاده برای CSS. مثل px و em و pt و % و غیره. پیشفرض px.*link*: نوع رفتار برای انیمیشنهای همزمان که می تونه یکی از مقادیر زیر باشه (پیشفرض ignore):
*ignore*: تا زمانی که انیمیشنی داره اجرا میشه. هیچ انیمیشن جدیدی اتفاق نمی افته و هیچ کدوم در نظر گرفته نمیشن.*cancel*: وقتی انیمیشن جدیدی اتفاق میافته، همه اونایی که دارند اجرا میشن، فورا متوقف میشن و انیمیشن جدید شروع میشه.*chain*: انیمیشنهای جدید، درست بعد از انیمیشنهای جاری اجرا میشن (به ترتیب).*duration*: مدت زمان اجرا شدن افکت به میلی ثانیه. پیشفرض 500. همچنین مقادیر "short" (برابر 250)، "normal" (برابر 500) و "long" (برابر 1000) رو هم میشه استفاده کرد.*transition*: تابعی برای نوع اجرا شدن افکت که پیش نیاز این مشخصه، وجود Fx.Transition است. پیشفرض Fx.Transitions.Sine.easeInOut


*توابع (متدها)*. این توابع توسط Instance کلاسها اجرا میشن. همونجوری که من در بالا متد start رو اجرا کردم (همه این متدها به اضافه متد اصلی، Instance برمیگردونند):
*start*: تابعی برای اجرای افکت که دو پارامتر میگیره. مقدار آغازین و مقدار پایانی. مثلا در مثال بالا ارتفاع رو از 100 به 200 بردیم. اگر فقط یک پارامتر بگیره، به عنوان مقدار پایانی در نظر میگیرتش.*set*: تابعی که در هر گام یا فریم افکت اجرا میشه و مقداری رو فورا تخصیص میده. مثلا در گام اول ارتفاع رو از 100 به 101 میبره. در گام دوم به 102. همینجوری تا 200.*cancel*: موجب لغو افکت میشه.*pause*: موجب لغو موقتی افکت میشه.*resume*: افکتهای pause شده رو ادامه میده.


*رویدادها (Events)*. هر کلاس مشتق شده ای می تونه رویدادهای خودش رو داشته باشه ولی رویدادهای پیشفرض Fx به ترتیب زیر هستند:
*start*: این رویداد به محض آغاز افکت فراخوانی میشه.*cancel*: این رویداد در زمان لغو افکت فراخوانی میشه.*complete*: رویداد بسیار مهمی که بعد از اتمام افکت فراخوانی میشه.*chainComplete*: اگر chain وجود داشته باشه. یعنی مشخصه link در بالا رو chain داده باشیم و چندین افکت پشت سر هم داشته باشیم، این رویداد بعد از اتمام همه اونها فراخوانی میشه.


مثال:
این نمونه استفاده Optionها و رویداد onComplete رو نشون میده. همینطور استفاده از متد اصلی به عنوان Instance (تابع start به خود Tx.Tween متصل شده):
new Fx.Tween(element, {
	duration: 2000,
	onComplete: function() {
		alert('Finished!');
	}
}).start('left', '100px');



کاربرد متدهای کلاس Fx در استفاده از کلاسهای مشتق شده. من برای element دو تا Event تعریف کردم که اولی زمان وارد شدن ماوس به element و دومی در زمان خارج شدن ماوس از اون فراخوانی میشه.
myTween = new Fx.Tween(element, {
	duration: 10000
}).start('margin-right', 600);

element.addEvents({
	mouseenter: function(){
		myTween.pause();
	},
	mouseleave: function(){
		myTween.resume();
	}
});
با اجرای کد، Tween با سرعت کم شروع به اجرا می کنه و وقتی ماوس رو روی element می بریم، متد pause اجرا میشه و همه چی رو متوقف میکنه و وقتی ماوس رو از روی element خارج می کنیم، متد resume افکت متوفق شده رو ادامه میده.


کاربرد chain:
myTween = new Fx.Tween(element, {
	link: 'chain'
});
myTween.start('margin-right', 600).start('margin-top', 300);
دو تابع start پشت سر هم اجرا میشن. اول margin-right به 600 میرسه و سپس margin-top شروع به حرکت به سمت 300 می کنه.




وقتی کلاسهای Fx.Tween و Fx.Morph تعریف میشن. توابعی رو به کلاس Element اضافه می کنند که استفاده اشون رو راحتتر و سریعتر می کنه.
کلاس Fx.Morph تابع morph و کلاس Fx.Tween توابع tween و fade و highlight رو ایجاد میکنند:
element.tween('margin-right', 600);
new Fx.Tween(element).start('margin-right', 600);
در اینجا، دو خط آخر کاملا یکسان هستند ولی اولی کوتاهتره.
نمونه های بیشتر:
element.tween('margin-right', 600);
element.fade('in');
element.highlight('#AAA', '#333');

element.morph({
	height : [200, 300],
	width : 200
});

برای تنظیم Optionها در این مدل استفاده، باید از متد *set* استفاده کرد:
element.set('tween', {
	duration: 2000,
	unit: 'em'
});
element.tween('margin-right', 20);


element.set('morph', {
	duration: 2000,
	onStart: function(){
		if(element.getStyle('display') == 'none')
			element.setStyle('display', 'block');
	}
});
element.morph({
	height : [200, 300],
	width : 200
});


و برای گرفتن Instance ایجاد شده هم تابع *get*:
element.set('tween', {
	duration: 20000,
	unit: 'em'
});
element.tween('margin-right', 20);

element.addEvent('click', function(){
	element.get('tween').pause();
});



در نهایت یه نکته تکمیلی اینکه Fx.Morph دوست داشتنی که Object میگیره، یه کار خیلی باحال دیگه ای هم می تونه بکنه و اون اینه که میشه بهش Selector داد تا به Style پیدا شده از Selector بره. مثلا فرض کنید ما اینا رو در CSS داریم:
.column div + span {
	opacity: .5,
	margin-top: 10px;
}

.someClass {
	padding:5px 10px;
	width: 300px;
}
حالا می تونیم از Fx.Morph اینجوری استفاده کنیم:
element.set('morph', { link:'chain' });
element.morph('.column div + span').morph('.someClass').morph('#someDiv p');
morph خودش میره از روی Selector، میگرده و Element رو پیدا می کنه، Styleاش رو میگیره و استفاده می کنه...
همین.





شنگول باشید
امیرحسین

----------


## navidAhwaz

نمونه آماده این پروژه رو برای دانلود بزارید
باتشکر

----------

