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

这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第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（）;
}）;
}）;

首页 / 脚本样式 / JavaScript / Mootools 1.2教程 同时进行多个形变动画

更多学习

首页 / 脚本样式 / JavaScript / Mootools 1.2教程同时进行多个形变动画