Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件

原文地址：30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx Options and Fx Events

MooTools 1.2的Fx.Morph、Fx选项和Fx事件

阅读上一讲：Mootools 1.2教程(10)——Fx.Tween的使用

今天，我们继续探索一下这个库的Fx部分，我们将学习如何使用Fx.Morph（它从本质上可以让你同时渐变多个样式表属性），然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项，最后我们将看看如何使用Fx事件，譬如“onComplete”和“onStart”。通过这些选项和事件，我们可以获得更好的控制权来控制形变动画。

Fx.Morph

创建一个新的Fx.Morph

初始化一个新的形变和创建一个新的渐变很类似，除了你要指定多个样式属性以外。

参考代码： 

// 首先，把我们的元素赋值给一个变量 
var morphElement = $('morph_element'); 

// 现在，我们创建一个新的形变 
var morphObject = new Fx.Morph(morphElement); 

// 现在我们可以设置样式属性，就像Fx.Tween一样 
// 不过我们这里可以设置多个样式属性 
morphObject.set({ 
    'width': 100, 
    'height': 100, 
    'background-color': '#eeeeee' 
}); 

// 我们也可以像启动一个渐变一样来启动我们的形变 
// 不过我们这里要同时放置多个属性值 
morphObject.start({ 
    'width': 300, 
    'height': 300, 
    'background-color': '#d3715c' 
}); 

上面这些就是全部的内容了，包括创建、设置和启动一个形变。

为了让这个更合理一些，我们应该创建我们的变量，把我们的函数独立出来，并创建一些事件来控制这这个事情：

参考代码： 

var morphSet = function(){ 
    // 这里我们可以像Fx.Tween一样设置样式属性 
    // 不过在这里我们可以同时设置多个样式属性 
    this.set({ 
        'width': 100, 
        'height': 100, 
        'background-color': '#eeeeee' 
    }); 
} 

var morphStart = function(){ 
    // 我们也可以像启动一个渐变一样启动一个形变 
    // 不过现在我们可以同时设置多个样式属性 
    this.start({ 
        'width': 300, 
        'height': 300, 
        'background-color': '#d3715c' 
    }); 
} 


var morphReset = function(){ 
    // 设置为最开始的值 
    this.set({ 
        'width': 0, 
        'height': 0, 
        'background-color': '#ffffff' 
    }); 
} 

window.addEvent('domready', function() { 
    // 首先，把我们的元素赋值给一个变量 
    var morphElement = $('morph_element'); 

    // 现在，我们创建我们的形变 
    var morphObject = new Fx.Morph(morphElement); 

    // 在这里我们给按钮添加点击事件 
    // 并且绑定morphObject和这个函数 
    // 从而可以在上面的函数中使用"this" 
    $('morph_set').addEvent('click', morphSet.bind(morphObject));   
    $('morph_start').addEvent('click', morphStart.bind(morphObject)); 
    $('morph_reset').addEvent('click', morphReset.bind(morphObject)); 
});

参考代码： 

<div id="morph_element"></div> 
<button id="morph_set">Set</button> 
<button id="morph_start">Start</button> 
<button id="morph_reset">reset</button>