Mootools 1.2教程同时进行多个形变动画

更新时间：2009年09月15日 22:41:48 作者：

今天我们来学习一下Fx.Elements插件，这是一个基于Fx.Morph的插件。与应用于单个元素不同的是，Fx.Elements可以允许你一次性给多个元素添加动画。

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。
基本用法
使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。
为了保证事情简洁，让我们首先建立一个元素数组，以用来传递给Fx.Elements。
参考代码： [复制代码] [保存代码]
var fxElementsArray = $$('.myElementClass');
现在我们就可以把我们的数组传递给Fx.Elements对象了。
参考代码：

复制代码代码如下:

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

和Fx.Morph一样，Fx.Elements扩展了Fx类，可以允许你使用Fx的全部选项和事件。
.start({})和.set({})方法
要开始一个Fx.Elements效果，或者使用Fx.Elements设置样式，你可以像使用Fx.Tween和Fx.Morph那样做，不过不是直接把设置直接应用到Fx.Elements对象上，而是通过索引引用对应的元素——第一个元素是0，第二个是1，以此类推。
参考代码：

复制代码代码如下:

 
// 你可以用.set({...})来设置样式 
fxElementsObject .set({ 
'0': { 
'height': 10, 
'width': 10, 
'background-color': '#333' 
}, 
'1': { 
'width': 10, 
'border': '1px dashed #333' 
} 
}); 
// 或者用.start({...})创建渐变动画 
fxElementsObject .start({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 

就像Fx.Morph，你可以为元素的渐变动画设定任何一个开始值和结束值，你也可以只设置一个参数（就像我们上面只给宽度设置了一个值），那么这个元素将会从当前值变化到新参数指定的值。
这就是关于Fx.Elements的全部内容了。可以看看下面的例子，看看它们是怎么使用的。
示例代码
这里我们对两个元素使用了Fx.Elements。在渐变动画中有几个不同的类型可以选择，同时暂停按钮可以让你暂停动画。
首先，我们来创建我们的元素，我们的可能告知按钮（包括重置（reset）按钮、暂停（pause）按钮和恢复（resume）按钮），还有一些指示器，以便让我们看明白这个过程。
参考代码：

复制代码代码如下:

 
<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代码也很简单
参考代码：

复制代码代码如下:

 
.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代码。
参考代码：

复制代码代码如下:

 
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(); 
}); 
}); 