mootools(十一) - 多彩的开始

时间：2007-08-18 来源：linxh

本文转自： http://blog.csdn.net/zarknight/archive/2007/04/22/1574572.aspx         mootools中集成了一些非常好用的界面组件，也提供了非常好用的界面效果工具类，用这些工具做界面效果，感觉上比用Prototype+Scriptaculous开发更方便，效果也更加的顺畅平滑。
       mootools的界面库Moo.Fx的设计十分的讲究OO原则，通过对提供了基本功能的基类的继承，扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类，它本身实现了Events,Chain,Options三个类，它包含了界面效果的最基本的动作和属性：

构造方法的可选属性：
------------------------------------------------------------------------------------------------------------------------------
onStart - 效果开始前执行的方法，默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法，默认是一个空的function。你可以指定你的function。
onCancel      - 中断效果后执行的方法，默认是一个空的function。你可以指定你的function。
transition       - 效果的过渡变换所使用的方程，用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程，默认使用的是Fx.Transitions.sineInOut(即正弦)
duration         - 变化频率，毫秒。默认为500。
unit                 - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait                - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps                 - 帧频。即每秒所执行的变换次数。默认为30帧/秒。

------------------------------------------------------------------------------------------------------------------------------
方法：set
作用：不经过过渡变换效果，直接设置为指定的值

var myFx = new Fx.Style('myElement', 'opacity').set(0);
方法：start
作用：执行效果，让指定的开始值过渡变换到指定的结束值

var myFx = new Fx.Style('myElement', 'opacity').start(0,1);
方法：stop
作用：中断效果的执行，如果指定了参数为false,则会执行onCancel指定的方法。

最后，如果要查看有哪些变换方程可以选用，可以看Fx.Transitions.js里的Fx.Transitions类，里面提供了非常之多的变换方程，具体的效果差别，自己去一个个去试试看吧。