搜尋

隨機推薦

30 十一月 2009
02 十二月 2009

30天學會 MooTools 教學(22): 通過Fx.Elements同時處理多個形變動畫

今天我們來學習一下Fx.Elements插件,這是一個基於Fx.Morph的插件。與應用於單個元素不同的是,Fx.Elements可以允許你一次性給多個元素添加動畫。這在你給多個元素添加有相同選項的形變動畫時非常有用。就像我們在第20講中看到的最後一個例子一樣。

廣告

 

基本用法

使用Fx.Elements的方法看起來和Fx.Morph差不多。這兩者之間的區別在於.start({})方法和.set({})方法。

為了保證事情簡潔,讓我們首先建立一個元素數組,以用來傳遞給Fx.Elements。


現在我們就可以把我們的數組傳遞給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>

 

我們的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選項及事件的教程

 

下載最後一個示例的代碼(36.24 KB)

 

Mootools 教學列表:

 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.