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

參數:
fps - (number:默認是50) 每秒的幀數.
unit - (string:默認是 false) 單位,可為 'px','em',或 '%'.
link - (string:默認是 ignore) 可以是 'ignore','cancel' 和 'chain'.
'ignore'-當請求正在執行之中時,新的請求將被忽略
'cancel'-當請求正在執行之中時,將立即取消當前執行中的請求,開始執行新的請求
'chain'-當請求正在執行之中時,將會把新的請求鏈接在當前請求之后,依次執行所有請求
duration - (number:默認是 500) 相應的持續時間,除了數字外還可以為以下值:
'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) 當動畫開始時觸發.
oncancel - (function) 當動畫被取消時觸發.
oncomplete - (function) 當動畫結束時觸發.
onchainComplete - (function) 如果使用了'chain'選項,則當所有的動畫鏈結束時觸發

方法:
start://用于觸發動畫
set://用于設置動畫的參數
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',{//建立補間動畫的對象,同時預設參數
fps:60,
duration:'long'
});
myFx.set('tween',{unit:'%'});//繼續添加參數
$('Content').addEvents({//給節點綁定動畫
'mouseenter':f1,//鼠標進入后執行f1
'mouseleave':f2,//鼠標進入后執行f2
'click':f3//點擊后執行f3
});
function f1(){//鼠標進入后給節點設css
myFx.set('background-color','#f00');
}
function f2(){//鼠標離開后用start觸發動畫,讓節點的高度改變,改變的幅度是百分比
myFx.start('height',[20,200]);
}
function f3(){//鼠標點擊后觸發動畫改變節點高度
myFx.start('height',[20,200]);
}

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

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

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

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

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

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

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

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