Menu

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 教學列表：