MooTools教程(11):Fx.Morph、Fx选项和Fx事件

【 tulaoshi.com - Web开发 】

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

Fx.Morph

创建一个新的Fx.Morph

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

参考代码：   morphElement = $();  morphObject =  Fx.Morph(morphElement); morphObject.set({    : ,    : ,    : }); morphObject.start({    : ,    : ,    : });

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

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

参考代码：   morphSet = (){            .set({        : ,        : ,        :     });}  morphStart = (){            .start({        : ,        : ,        :     });}   morphReset = (){        .set({        : ,        : ,        :     });} window.addEvent(, () {         morphElement = $();          morphObject =  Fx.Morph(morphElement);                 $().addEvent(, morphSet.bind(morphObject));      $().addEvent(, morphStart.bind(morphObject));    $().addEvent(, morphReset.bind(morphObject));});参考代码：  div id=/divbutton id=Set/buttonbutton id=Start/buttonbutton id=reset/button

 SetStartreset

 

Fx选项（Options）

下面的选项都可以被Fx.Tween和Fx.Morph接受。它们都非常容易实现，而且可以给你非常多的控制权来控制你的效果。要使用这些选项，请使用下面的语法：

参考代码：   morphObject =  Fx.Morph(morphElement, {                duration: ,    transition: });

fps（每秒帧数，frames per second）

这个选项决定了这个动画每秒的帧数。默认值是50，可以接受数字和值为数字的变量。

参考代码：   morphObject =  Fx.Morph(morphElement, {    fps: });  framesPerSecond = ;  tweenObject =  Fx.Tween(tweenElement, {    fps: framesPerSecond});

unit（单位）

这个选项设置了数字的单位。例如，你的100是指100个像素（px）、百分比还是em？

参考代码：   morphObject =  Fx.Morph(morphElement, {    unit: });

link（连接）

link选项提供了一种方式可以让你管理多个启动效果的函数调用。例如，如果你有一个鼠标移上去（mouseover）的效果，你是希望每次用户移上去都启动这个效果吗？或者是，如果一个人把鼠标移上去两次，它应该忽略第二个响应还是应该把它们串连起来，然后等第一次调用完成以后再第二次调用这个效果？link又三个设置：

ignore（默认）在一个效果没有完成之前忽略任何启动新效果的调用 cancel如果有另外一个效果调用，则放弃当前的效果，转而处理新的效果调用 chain链可以让你把效果像链条一样把效果连接起来，把这些调用进行堆栈，然后逐一调用这些效果，直到完成参考代码：   morphObject =  Fx.Morph(morphElement, {    link: });

duration（持续时间）

duration可以让你定义这个动画的持续时间。持续事件和速度是不一样的，因此如果你想让一个对象在一秒内移动100个像素，那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字（以毫秒为单位）、一个值为数字的变量或者三个快捷方式：

short=250ms normal=500ms（默认） long=1000ms参考代码：   morphObject =  Fx.Morph(morphElement, {    duration: });  morphObject =  Fx.Morph(morphElement, {    duration: });

transition（过渡效果）

最后一个选项：transition，可以让你决定过渡类型。例如，它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果：

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）参考代码：   tweenObject =  Fx.Tween(tweenElement, {    transition: });

注意：第一个过渡条在开始时触发了一个红色的醒目效果，在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。

这上面30个过渡类型可以分成十组：

Quad Cubic Quart Quint Expo Circ Sine Back Bounce Elastic

每一个组都有三个选项：

Ease In Ease Out Ease In OutFx的事件

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

onStart当Fx开始时触发 onCancel当Fx取消时触发 onComplete当Fx完成时触发 onChainComplete当Fx链完成时触发

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

参考代码：  quadIn =  Fx.Tween(quadIn, {        link: ,    transition: ‘quad:in’,            onStart: (passes_tween_element){                                passes_tween_element.highlight();    },             onComplete: (passes_tween_element){                passes_tween_element.highlight();    }});示例

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

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）参考代码：   enterFunction = () {    .start(, );}  leaveFunction = () {    .start(, );} window.addEvent(, () {         quadIn = $();     quadOut = $();     quadInOut = $();             quadIn =  Fx.Tween(quadIn, {    link: ,    transition: Fx.Transitions.Quad.easeIn,    onStart: (passes_tween_element){        passes_tween_element.highlight();    },    onComplete: (passes_tween_element){        passes_tween_element.highlight();    }        });    quadOut =  Fx.Tween(quadOut, {    link: ,    transition:     });     quadInOut =  Fx.Tween(quadInOut, {    link: ,    transition:     });                     $().addEvents({                    : enterFunction.bind(quadIn),    : leaveFunction.bind(quadIn)    });     $().addEvents({        : enterFunction.bind(quadOut),    : leaveFunction.bind(quadOut)    });     $().addEvents({                : enterFunction.bind(quadInOut),    : leaveFunction.bind(quadInOut)    });更多学习

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

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