توابع متحرک سازی یا به اصطلاح 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اش رو میگیره و استفاده می کنه...
همین.
شنگول باشید
امیرحسین
