今天，我們繼續(xù)探索一下這個(gè)庫(kù)的fx部分，我們將學(xué)習(xí)如何使用fx.morph（它從本質(zhì)上可以讓你同時(shí)漸變多個(gè)樣式表屬性），然后我們?cè)贆z查一下應(yīng)用到fx.tween和fx.morph的一些fx選項(xiàng)，最后我們將看看如何使用fx事件，譬如“oncomplete”和“onstart”。通過(guò)這些選項(xiàng)和事件，我們可以獲得更好的控制權(quán)來(lái)控制形變動(dòng)畫。
fx.morph
創(chuàng)建一個(gè)新的fx.morph
初始化一個(gè)新的形變和創(chuàng)建一個(gè)新的漸變很類似，除了你要指定多個(gè)樣式屬性以外。
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphelement = $('morph_element');
-
- var morphobject = new fx.morph(morphelement);
-
- morphobject.set({
- 'width': 100,
- 'height': 100,
- 'background-color': '#eeeeee'
- });
-
- morphobject.start({
- 'width': 300,
- 'height': 300,
- 'background-color': '#d3715c'
- });
上面這些就是全部的內(nèi)容了，包括創(chuàng)建、設(shè)置和啟動(dòng)一個(gè)形變。
為了讓這個(gè)更合理一些，我們應(yīng)該創(chuàng)建我們的變量，把我們的函數(shù)獨(dú)立出來(lái)，并創(chuàng)建一些事件來(lái)控制這這個(gè)事情：
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphset = function(){
-
-
- this.set({
- 'width': 100,
- 'height': 100,
- 'background-color': '#eeeeee'
- });
- }
-
- var morphstart = function(){
-
-
- this.start({
- 'width': 300,
- 'height': 300,
- 'background-color': '#d3715c'
- });
- }
-
-
- var morphreset = function(){
-
- this.set({
- 'width': 0,
- 'height': 0,
- 'background-color': '#ffffff'
- });
- }
-
- window.addevent('domready', function() {
-
- var morphelement = $('morph_element');
-
-
- var morphobject = new fx.morph(morphelement);
-
-
-
-
- $('morph_set').addevent('click', morphset.bind(morphobject));
- $('morph_start').addevent('click', morphstart.bind(morphobject));
- $('morph_reset').addevent('click', morphreset.bind(morphobject));
- });
參考代碼： [復(fù)制代碼] [保存代碼]
- <div id="morph_element"></div>
- <button id="morph_set">set</button>
- <button id="morph_start">start</button>
- <button id="morph_reset">reset</button>
fx選項(xiàng)（options）
下面的選項(xiàng)都可以被fx.tween和fx.morph接受。它們都非常容易實(shí)現(xiàn)，而且可以給你非常多的控制權(quán)來(lái)控制你的效果。要使用這些選項(xiàng)，請(qǐng)使用下面的語(yǔ)法：
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphobject = new fx.morph(morphelement, {
-
-
-
- duration: 'long',
- transition: 'sine:in'
- });
fps（每秒幀數(shù)，frames per second）
這個(gè)選項(xiàng)決定了這個(gè)動(dòng)畫每秒的幀數(shù)。默認(rèn)值是50，可以接受數(shù)字和值為數(shù)字的變量。
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphobject = new fx.morph(morphelement, {
- fps: 60
- });
-
- var framespersecond = 60;
-
- var tweenobject = new fx.tween(tweenelement, {
- fps: framespersecond
- });
unit（單位）
這個(gè)選項(xiàng)設(shè)置了數(shù)字的單位。例如，你的100是指100個(gè)像素（px）、百分比還是em？
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphobject = new fx.morph(morphelement, {
- unit: '%'
- });
link（連接）
link選項(xiàng)提供了一種方式可以讓你管理多個(gè)啟動(dòng)效果的函數(shù)調(diào)用。例如，如果你有一個(gè)鼠標(biāo)移上去（mouseover）的效果，你是希望每次用戶移上去都啟動(dòng)這個(gè)效果嗎？或者是，如果一個(gè)人把鼠標(biāo)移上去兩次，它應(yīng)該忽略第二個(gè)響應(yīng)還是應(yīng)該把它們串連起來(lái)，然后等第一次調(diào)用完成以后再第二次調(diào)用這個(gè)效果？link又三個(gè)設(shè)置：
- “ignore”（默認(rèn)）——在一個(gè)效果沒(méi)有完成之前忽略任何啟動(dòng)新效果的調(diào)用
- “cancel”——如果有另外一個(gè)效果調(diào)用，則放棄當(dāng)前的效果，轉(zhuǎn)而處理新的效果調(diào)用
- “chain”——鏈可以讓你把效果像“鏈條”一樣把效果連接起來(lái)，把這些調(diào)用進(jìn)行堆棧，然后逐一調(diào)用這些效果，直到完成
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphobject = new fx.morph(morphelement, {
- link: 'chain'
- });
duration（持續(xù)時(shí)間）
duration可以讓你定義這個(gè)動(dòng)畫的持續(xù)時(shí)間。持續(xù)事件和速度是不一樣的，因此如果你想讓一個(gè)對(duì)象在一秒內(nèi)移動(dòng)100個(gè)像素，那么它將比一個(gè)每秒移動(dòng)1000個(gè)像素的對(duì)象要慢。你可以輸入一個(gè)數(shù)字（以毫秒為單位）、一個(gè)值為數(shù)字的變量或者三個(gè)快捷方式：
- “short”=250ms
- “normal”=500ms（默認(rèn)）
- “long”=1000ms
參考代碼： [復(fù)制代碼] [保存代碼]
- var morphobject = new fx.morph(morphelement, {
- duration: 'long'
- });
-
- var morphobject = new fx.morph(morphelement, {
- duration: 1000
- });
transition（過(guò)渡效果）
最后一個(gè)選項(xiàng)：transition，可以讓你決定過(guò)渡類型。例如，它是不是一個(gè)平滑的過(guò)渡或者它應(yīng)該先慢慢開(kāi)始然后加速直到結(jié)束。看看這些在mootools的核心庫(kù)里可以用的過(guò)渡效果：
參考代碼： [復(fù)制代碼] [保存代碼]
- var tweenobject = new fx.tween(tweenelement, {
- transition: 'quad:in'
- });
注意：第一個(gè)過(guò)渡條在開(kāi)始時(shí)觸發(fā)了一個(gè)紅色的醒目效果，在結(jié)束時(shí)觸發(fā)了一個(gè)橙色的醒目效果。看看下面是怎么使用fx的事件的。
這上面30個(gè)過(guò)渡類型可以分成十組：
- quad
- cubic
- quart
- quint
- expo
- circ
- sine
- back
- bounce
- elastic
每一個(gè)組都有三個(gè)選項(xiàng)：
- ease in
- ease out
- ease in out
fx的事件
fx的事件使得你在動(dòng)畫效果的執(zhí)行過(guò)程中，在不同的點(diǎn)執(zhí)行一些代碼。在創(chuàng)建用戶反饋信息時(shí)這會(huì)很有用，這也給了你另一層控制權(quán)來(lái)控制你的漸變和形變：
- onstart——當(dāng)fx開(kāi)始時(shí)觸發(fā)
- oncancel——當(dāng)fx取消時(shí)觸發(fā)
- oncomplete——當(dāng)fx完成時(shí)觸發(fā)
- onchaincomplete——當(dāng)fx鏈完成時(shí)觸發(fā)
當(dāng)你建立一個(gè)漸變或者形變時(shí)，你可以設(shè)置這其中的一個(gè)事件，就像你設(shè)置一個(gè)或多個(gè)選項(xiàng)一樣，不過(guò)不是設(shè)置一個(gè)值，而是設(shè)置一個(gè)函數(shù)：
參考代碼： [復(fù)制代碼] [保存代碼]
- quadin = new fx.tween(quadin, {
-
- link: 'cancel',
- transition: ‘quad:in’,
-
-
- onstart: function(passes_tween_element){
-
-
-
- passes_tween_element.highlight('#c54641');
- },
-
-
-
- oncomplete: function(passes_tween_element){
-
- passes_tween_element.highlight('#c54641');
- }
- });
示例
為了生成上面的變形代碼，我們可以用一種我們?cè)谶@個(gè)系列的教程中還沒(méi)有見(jiàn)過(guò)的方式來(lái)重用我們的函數(shù)。這上面所有的變形元素都使用了兩個(gè)函數(shù)，一個(gè)當(dāng)鼠標(biāo)進(jìn)入時(shí)漸變淡出，另外一個(gè)在當(dāng)鼠標(biāo)離開(kāi)時(shí)漸變返回：
參考代碼： [復(fù)制代碼] [保存代碼]
- var enterfunction = function() {
- this.start('width', '700px');
- }
-
- var leavefunction = function() {
- this.start('width', '300px');
- }
-
- window.addevent('domready', function() {
-
- var quadin = $('quadin');
- var quadout = $('quadout');
- var quadinout = $('quadinout');
-
-
-
- quadin = new fx.tween(quadin, {
- link: 'cancel',
- transition: fx.transitions.quad.easein,
- onstart: function(passes_tween_element){
- passes_tween_element.highlight('#c54641');
- },
- oncomplete: function(passes_tween_element){
- passes_tween_element.highlight('#e67f0e');
- }
- });
-
- quadout = new fx.tween(quadout, {
- link: 'cancel',
- transition: 'quad:out'
- });
-
- quadinout = new fx.tween(quadinout, {
- link: 'cancel',
- transition: 'quad:in:out'
- });
-
-
-
-
-
- $('quadin').addevents({
-
-
-
-
- 'mouseenter': enterfunction.bind(quadin),
- 'mouseleave': leavefunction.bind(quadin)
- });
-
- $('quadout').addevents({
-
- 'mouseenter': enterfunction.bind(quadout),
- 'mouseleave': leavefunction.bind(quadout)
- });
-
- $('quadinout').addevents({
-
-
-
- 'mouseenter': enterfunction.bind(quadinout),
- 'mouseleave': leavefunction.bind(quadinout)
- });
更多學(xué)習(xí)……
你可以通過(guò)fx庫(kù)里面的工具來(lái)獲得對(duì)效果更細(xì)致的控制權(quán)。請(qǐng)一定要閱讀一下文檔中的fx這一節(jié)，還有tween、morph和transitions。
下載一個(gè)包含你開(kāi)始所需要的東西的zip包
包括這個(gè)頁(yè)面上的實(shí)例，mootools 1.2核心庫(kù)，一個(gè)外部的javascript文件，一個(gè)外部的css文件或者一個(gè)簡(jiǎn)單的html文件。
