Mootools 1.2教程(22)——同时进行多个形变动画（2）

示例代码

这里我们对两个元素使用了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）

asp之家下载地址：mootorial_day22_FxElements.zip （36.24 KB）

也包含你开始实践所需要的所有东西。

阅读下一篇：Mootools 1.2教程(23)——滑动效果（Slide）