|
|
基本用法
使用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();
});
});
更多學習
正如你所看到的，Fx.Elements非常簡單。要更深入地學習，可以仔細地閱讀一下Fx.Elements文檔、Fx.Morph文檔和Fx文檔。
另外，確保閱讀過我們關于Fx.Morph和Fx選項及事件的教程。
下載最后一個示例的代碼
也包含你開始實踐所需要的所有東西。
JavaScript技術：Mootools 1.2教程 同時進行多個形變動畫，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
