快捷導(dǎo)航

Mootools 1.2教程同時(shí)進(jìn)行多個(gè)形變動(dòng)畫

更新時(shí)間：2009年09月15日 22:41:48 作者：

今天我們來(lái)學(xué)習(xí)一下Fx.Elements插件，這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動(dòng)畫。

這在你給多個(gè)元素添加有相同選項(xiàng)的形變動(dòng)畫時(shí)非常有用。就像我們?cè)诘?0講中看到的最后一個(gè)例子一樣。
基本用法
使用Fx.Elements的方法看起來(lái)和Fx.Morph差不多。這兩者之間的區(qū)別在于.start({})方法和.set({})方法。
為了保證事情簡(jiǎn)潔，讓我們首先建立一個(gè)元素?cái)?shù)組，以用來(lái)傳遞給Fx.Elements。
參考代碼： [復(fù)制代碼] [保存代碼]
var fxElementsArray = $$('.myElementClass');
現(xiàn)在我們就可以把我們的數(shù)組傳遞給Fx.Elements對(duì)象了。
參考代碼：

復(fù)制代碼代碼如下:

 
var fxElementsObject = new Fx.Elements(fxElementsArray, { 
// Fx選項(xiàng) 
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
// Fx事件 
onStart: function(){ 
startInd.highlight('#C3E608'); 
} 
}); 

和Fx.Morph一樣，F(xiàn)x.Elements擴(kuò)展了Fx類，可以允許你使用Fx的全部選項(xiàng)和事件。
.start({})和.set({})方法
要開始一個(gè)Fx.Elements效果，或者使用Fx.Elements設(shè)置樣式，你可以像使用Fx.Tween和Fx.Morph那樣做，不過(guò)不是直接把設(shè)置直接應(yīng)用到Fx.Elements對(duì)象上，而是通過(guò)索引引用對(duì)應(yīng)的元素——第一個(gè)元素是0，第二個(gè)是1，以此類推。
參考代碼：

復(fù)制代碼代碼如下:

 
// 你可以用.set({...})來(lái)設(shè)置樣式 
fxElementsObject .set({ 
'0': { 
'height': 10, 
'width': 10, 
'background-color': '#333' 
}, 
'1': { 
'width': 10, 
'border': '1px dashed #333' 
} 
}); 
// 或者用.start({...})創(chuàng)建漸變動(dòng)畫 
fxElementsObject .start({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 

就像Fx.Morph，你可以為元素的漸變動(dòng)畫設(shè)定任何一個(gè)開始值和結(jié)束值，你也可以只設(shè)置一個(gè)參數(shù)（就像我們上面只給寬度設(shè)置了一個(gè)值），那么這個(gè)元素將會(huì)從當(dāng)前值變化到新參數(shù)指定的值。
這就是關(guān)于Fx.Elements的全部?jī)?nèi)容了?？梢钥纯聪旅娴睦?，看看它們是怎么使用的。
示例代碼
這里我們對(duì)兩個(gè)元素使用了Fx.Elements。在漸變動(dòng)畫中有幾個(gè)不同的類型可以選擇，同時(shí)暫停按鈕可以讓你暫停動(dòng)畫。
首先，我們來(lái)創(chuàng)建我們的元素，我們的可能告知按鈕（包括重置（reset）按鈕、暫停（pause）按鈕和恢復(fù)（resume）按鈕），還有一些指示器，以便讓我們看明白這個(gè)過(guò)程。
參考代碼：

復(fù)制代碼代碼如下:

 
<div id="start_ind" class="ind">onStart</div> 
<div id="cancel_ind" class="ind">onCancel</div> 
<div id="complete_ind" class="ind">onComplete</div> 
<div id="chain_complete_ind" class="ind">onChainComplete</div> 
<span id='buttons'> 
<button id="fxstart">Start A</button> 
<button id="fxstartB">Start B</button> 
<button id="fxset">Reset</button> 
<button id="fxpause">Pause</button> 
<button id="fxresume">Resume</button> 
</span> 
<div class="myElementClass">Element 0</div> 
<div class="myElementClass">Element 1</div> 

我們的CSS代碼也很簡(jiǎn)單
參考代碼：

復(fù)制代碼代碼如下:

 
.ind { 
width: 200px; 
padding: 10px; 
background-color: #87AEE1; 
font-weight: bold; 
border-bottom: 1px solid white; 
} 
.myElementClass { 
height: 50px; 
width: 100px; 
background-color: #FFFFCC; 
border: 1px solid #FFFFCC; 
padding: 20px; 
} 
#buttons { 
margin: 20px 0; 
display: block; 
} 

下面是MooTools代碼。
參考代碼：

復(fù)制代碼代碼如下:

 
var startFXElement = function(){ 
this.start({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 
} 
var startFXElementB = function(){ 
this.start({ 
'0': { 
'width': 500, 
'background-color': '#333' 
}, 
'1': { 
'width': 500, 
'border': '10px solid #DC1E6D' 
} 
}); 
} 
var setFXElement = function(){ 
this.set({ 
'0': { 
'height': 50, 
'background-color': '#FFFFCC', 
'width': 100 
}, 
'1': { 
'height': 50, 
'width': 100, 
'border': 'none' 
} 
}); 
} 
window.addEvent('domready', function() { 
var fxElementsArray = $$('.myElementClass'); 
var startInd = $('start_ind'); 
var cancelInd = $('cancel_ind'); 
var completeInd = $('complete_ind'); 
var chainCompleteInd = $('chain_complete_ind'); 
var fxElementsObject = new Fx.Elements(fxElementsArray, { 
//Fx Options 
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
//Fx Events 
onStart: function(){ 
startInd.highlight('#C3E608'); 
}, 
onCancel: function(){ 
cancelInd.highlight('#C3E608'); 
}, 
onComplete: function(){ 
completeInd.highlight('#C3E608'); 
}, 
onChainComplete: function(){ 
chainCompleteInd.highlight('#C3E608'); 
} 
}); 
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject)); 
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject)); 
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject)); 
$('fxpause').addEvent('click', function(){ 
fxElementsObject.pause(); 
}); 
$('fxresume').addEvent('click', function(){ 
fxElementsObject.resume(); 
}); 
}); 