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

Fx的事件

Fx的事件使得你在动画效果的执行过程中，在不同的点执行一些代码。在创建用户反馈信息时这会很有用，这也给了你另一层控制权来控制你的渐变和形变：

• onStart——当Fx开始时触发




• onCancel——当Fx取消时触发




• onComplete——当Fx完成时触发




• onChainComplete——当Fx链完成时触发

当你建立一个渐变或者形变时，你可以设置这其中的一个事件，就像你设置一个或多个选项一样，不过不是设置一个值，而是设置一个函数：

参考代码：  

// 首先我们把一个新的Fx.Tween赋值给一个变量 
// 然后定义我们要渐变的元素 
quadIn = new Fx.Tween(quadIn, { 
    // 这里是一些选项 
    link: 'cancel', 
    transition: ‘quad:in’, 

       // 这里是一些事件 
    onStart: function(passes_tween_element){ 
        // 这些事件都会传递渐变的对象 
        // 因此当动画开始时 
        // 这里我们调用一个"highlight"效果  
        passes_tween_element.highlight('#C54641'); 
    }, 

    // 注意这个逗号是怎样始终出现在每个事件和选项之间的 
    // 但是最后一个事件或者选项后面没有 
    onComplete: function(passes_tween_element){ 
        // 在结束时，我们再应用一个highlight效果 
        passes_tween_element.highlight('#C54641'); 
    } 
});

示例

为了生成上面的变形代码，我们可以用一种我们在这个系列的教程中还没有见过的方式来重用我们的函数。这上面所有的变形元素都使用了两个函数，一个当鼠标进入时渐变淡出，另外一个在当鼠标离开时渐变返回：

参考代码： 

// 这是我们在鼠标进入时调用的函数 
// 宽度渐变到700px 
var enterFunction = function() { 
    this.start('width', '700px'); 
} 

// 这是我们在鼠标离开时调用的函数 
// 宽度渐变回300px 
var leaveFunction = function() { 
    this.start('width', '300px'); 
} 

window.addEvent('domready', function() { 
    // 这里我们把一些元素赋值给变量 
    var quadIn = $('quadin'); 
    var quadOut = $('quadout'); 
    var quadInOut = $('quadinout'); 

    // 然后我们创建三个渐变元素 
    // 分别对应上面的三个变量 
    quadIn = new Fx.Tween(quadIn, { 
    link: 'cancel', 
    transition: Fx.Transitions.Quad.easeIn, 
    onStart: function(passes_tween_element){ 
        passes_tween_element.highlight('#C54641'); 
    }, 
    onComplete: function(passes_tween_element){ 
        passes_tween_element.highlight('#E67F0E'); 
    }     
    }); 

   quadOut = new Fx.Tween(quadOut, { 
    link: 'cancel', 
    transition: 'quad:out' 
    }); 

    quadInOut = new Fx.Tween(quadInOut, { 
    link: 'cancel', 
    transition: 'quad:in:out' 
    }); 

    // 现在我们添加鼠标进入和鼠标离开事件 
    // 注意.addEvents的使用 
    // 则和.addEvent的使用类似 
    // 不过你可以通过下面的模式添加多个事件 
    $('quadin').addEvents({ 
    // 首先，你要说明是什么事件，并把事件用单引号引起来 
    // 然后后面跟一个冒号（:） 
    // 最后放置你的函数 
    // 在这个例子中，函数banding到这个渐变对象 
    'mouseenter': enterFunction.bind(quadIn), 
    'mouseleave': leaveFunction.bind(quadIn) 
    }); 

    $('quadout').addEvents({ 
    // 注意我们这里是怎样重复使用这个函数的 
    'mouseenter': enterFunction.bind(quadOut), 
    'mouseleave': leaveFunction.bind(quadOut) 
    }); 

    $('quadinout').addEvents({ 
    // 我们这里也使用了那些同样的函数 
    // 不过每次我们都应用一个事件到不同的元素 
    // 并且绑定不同的渐变 
    'mouseenter': enterFunction.bind(quadInOut), 
    'mouseleave': leaveFunction.bind(quadInOut) 
    }); 

更多学习……

你可以通过Fx库里面的工具来获得对效果更细致的控制权。请一定要阅读一下文档中的Fx这一节，还有tween、morph和transitions。

远程下载地址：下载一个包含你开始所需要的东西的zip包（29.07 KB）

asp之家下载：mootorial_day11_fx_morph_and_options.zip （29.07 KB）

包括这个页面上的实例，MooTools 1.2核心库，一个外部的JavaScript文件，一个外部的CSS文件或者一个简单的html文件。