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

原文地址：30 Days of Mootools 1.2 Tutorials – Day 22 – Fx.Elements

通过Fx.Elements同时处理多个形变动画

请尊重个人劳动，转载请注明出处：http://fdream.net，译者：Fdream

如果你还没有准备好开始这一讲，请参考这一系列的教程，这里是《MooTools 1.2系列教程目录》。

今天我们来学习一下Fx.Elements插件，这是一个基于Fx.Morph的插件。与应用于单个元素不同的是，Fx.Elements可以允许你一次性给多个元素添加动画。这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第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();
    });
});

Start AStart BResetPauseResume

更多学习

正如你所看到的，Fx.Elements非常简单。要更深入地学习，可以仔细地阅读一下Fx.Elements文档、Fx.Morph文档和Fx文档。

另外，确保阅读过我们关于Fx.Morph和Fx选项及事件的教程。

下载最后一个示例的代码

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