一周學會Mootools 1.4中文教程:(6)動畫

參數(shù):
fps - (number:默認是50) 每秒的幀數(shù).
unit - (string:默認是 false) 單位,可為 'px','em',或 '%'.
link - (string:默認是 ignore) 可以是 'ignore','cancel' 和 'chain'.
'ignore'-當請求正在執(zhí)行之中時,新的請求將被忽略
'cancel'-當請求正在執(zhí)行之中時,將立即取消當前執(zhí)行中的請求,開始執(zhí)行新的請求
'chain'-當請求正在執(zhí)行之中時,將會把新的請求鏈接在當前請求之后,依次執(zhí)行所有請求
duration - (number:默認是 500) 相應的持續(xù)時間,除了數(shù)字外還可以為以下值:
'short' - 250ms
'normal' - 500ms
'long' - 1000ms
transition - (function:默認是 'sine:in:out') 動畫過渡效果,大家可以測試一下下邊的效果看看.The equation to use for the effect see Fx.Transitions. Also accepts a string in the following form:
transition[:in][:out] - 如,'linear','quad:in','back:in','bounce:out','elastic:out','sine:in:out'

事件:
onstart - (function) 當動畫開始時觸發(fā).
oncancel - (function) 當動畫被取消時觸發(fā).
oncomplete - (function) 當動畫結束時觸發(fā).
onchainComplete - (function) 如果使用了'chain'選項,則當所有的動畫鏈結束時觸發(fā)

方法:
start://用于觸發(fā)動畫
set://用于設置動畫的參數(shù)
cancel://用于終止運行中的動畫
resume://返回一個之前暫停的動畫

示例:
var opt={
fps:60,
link:'chain',//ignore,cancel,chain
duration:'long',//'short':250ms;'normal':500ms;'long':1000ms
transition:'bounce:out',//'linear','quad:in','back:in','bounce:out','elastic:out','sine:in:out' - [:in][:out]
onStart:function(){console.log('開始!');},
onComplete:function(){console.log('結束后!');}
}
$('b').set('morph',opt).morph({'width':500,'height':300});

我們來演示一個補間動畫的實例:

var myFx=new Fx.Tween('Content',{//建立補間動畫的對象,同時預設參數(shù)
fps:60,
duration:'long'
});
myFx.set('tween',{unit:'%'});//繼續(xù)添加參數(shù)
$('Content').addEvents({//給節(jié)點綁定動畫
'mouseenter':f1,//鼠標進入后執(zhí)行f1
'mouseleave':f2,//鼠標進入后執(zhí)行f2
'click':f3//點擊后執(zhí)行f3
});
function f1(){//鼠標進入后給節(jié)點設css
myFx.set('background-color','#f00');
}
function f2(){//鼠標離開后用start觸發(fā)動畫,讓節(jié)點的高度改變,改變的幅度是百分比
myFx.start('height',[20,200]);
}
function f3(){//鼠標點擊后觸發(fā)動畫改變節(jié)點高度
myFx.start('height',[20,200]);
}

另外補間動畫Tween為我們提供了兩個方法,分別是fade和highlight,下邊的例子分別演示他們的用法:

示例1:
$('myElement').fade('out');//淡出節(jié)點
$('myElement').fade(0.7);//改變節(jié)點透明度.

示例2:
$('myElement').highlight('#ddf');
$('myElement').highlight('#ddf','#ccc');

這兩個例子對于我們要實現(xiàn)一些簡單的效果時會非常有用.沒必要設置一大堆的參數(shù).

有了前邊的補間動畫我們再來學一種變形動畫:

var myFx=new Fx.Morph('Content',{//建立變形動畫對象同時設置參數(shù),Content是節(jié)點
fps:60,
duration:'long'
});
myFx.set('Content',{duration:'long',transition:'bounce:out'});//繼續(xù)設置動畫參數(shù)
$('Content').addEvents({//給節(jié)點綁定事件
'mouseenter':f1,//鼠標進入后執(zhí)行f1
'mouseleave':f2,//鼠標離開后執(zhí)行f2
'click':f3//鼠標點擊后執(zhí)行f3
});
function f1(){//鼠標進入后給節(jié)點設置初始css
myFx.set({
'height':200,
'width':200,
'background-color':'#f00',
'opacity':0.8
});
myFx.morph({height:100,width:100});
}
function f2(){//鼠標離開后觸發(fā)動畫,改變節(jié)點的高和寬
myFx.start({
'height':[10,100],
'width':[900,300]
});
}
function f3(){//鼠標點擊后觸發(fā)動畫,改變節(jié)點的高,寬,背景色,透明度.
myFx.start({
'height':[200,900],
'width':[200,600],
'background-color':'#00f',
'opacity':0.2
});
}

好了,我已經(jīng)把mootools的兩大動畫特效呈現(xiàn)在你的面前了,參數(shù)比較多需要多練習才能熟能生巧.童鞋們加油吧.如果有問題可以進入QQ群一起討論(16648471)

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈