我们将学习如何使用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></div>
<button>Set</button>
<button>Start</button>
<button>reset</button>
SetStartreset
Fx选项（Options）
下面的选项都可以被Fx.Tween和Fx.Morph接受。它们都非常容易实现，而且可以给你非常多的控制权来控制你的效果。要使用这些选项，请使用下面的语法：
参考代码：
复制代码 代码如下:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
// 首先是选项的名字
// 然后后面跟一个冒号（:）
// 然后定义你的选项
duration: 'long',
transition: 'sine:in'
});
fps（每秒帧数，frames per second）
这个选项决定了这个动画每秒的帧数。默认值是50，可以接受数字和值为数字的变量。
参考代码：
复制代码 代码如下:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// 或者这样
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});
unit（单位）
这个选项设置了数字的单位。例如，你的100是指100个像素（px）、百分比还是em？
参考代码：
复制代码 代码如下:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
link（连接）
link选项提供了一种方式可以让你管理多个启动效果的函数调用。例如，如果你有一个鼠标移上去（mouseover）的效果，你是希望每次用户移上去都启动这个效果吗？或者是，如果一个人把鼠标移上去两次，它应该忽略第二个响应还是应该把它们串连起来，然后等第一次调用完成以后再第二次调用这个效果？link又三个设置：
“ignore”（默认）——在一个效果没有完成之前忽略任何启动新效果的调用
“cancel”——如果有另外一个效果调用，则放弃当前的效果，转而处理新的效果调用
“chain”——链可以让你把效果像“链条”一样把效果连接起来，把这些调用进行堆栈，然后逐一调用这些效果，直到完成
参考代码：
复制代码 代码如下: