// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
duration（持续时间）
duration可以让你定义这个动画的持续时间。持续事件和速度是不一样的，因此如果你想让一个对象在一秒内移动100个像素，那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字（以毫秒为单位）、一个值为数字的变量或者三个快捷方式：
“short”=250ms
“normal”=500ms（默认）
“long”=1000ms
参考代码：
复制代码 代码如下:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
// 或者这样
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
transition（过渡效果）
最后一个选项：transition，可以让你决定过渡类型。例如，它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果：
参考代码：
复制代码 代码如下:
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
注意：第一个过渡条在开始时触发了一个红色的醒目效果，在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。
这上面30个过渡类型可以分成十组：
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
每一个组都有三个选项：
Ease In
Ease Out
Ease In Out
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)
});
更多学习……