和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极“炫”的效果——可以很平滑地发生形变动画，从而改善你的用户体验。
Tween的快捷方法
我们通常都从“基本知识”入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用起来都极其简单以至于我忍不住要从这里开始。
.tween();
一个渐变（tween）是一个在两个样式属性值之间的平滑的变化。举个例子，通过渐变（tween）你可以把div的宽度（width）平滑地由100像素变化为300像素。
参考代码：
复制代码 代码如下:
// 创建一个新的函数
var tweenerFunction = function() {
// 选中你要使用渐变的元素
// 然后加上.tween
// 最后声明你要变化到的属性和值
$('tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
// 在这里给一个按钮添加一个事件
// 当点击时初始化这个渐变
// 并调用我们的渐变函数
$('tween_button').addEvent('click', tweenerFunction);
});
相应于上面的代码，我们的HTML代码看起来大概应该是这样的：
参考代码：
复制代码 代码如下:
<div></div>
<button>300 width</button>
.fade();
这个方法可以让你平滑地调整一个元素的不透明度（opacity）。这个使用起来和上面的例子几乎一模一样：
参考代码：
复制代码 代码如下:
// 创建一个新函数
var tweenFadeFifty = function() {
// 在这里创建你的选择器
// 然后添加.fade
// 最后声明一个0到1之间的值（0代表不可见，1代表完全可见）
$('tweener').fade('.5');
}
window.addEvent('domready', function() {
// 在这里给按钮添加一个事件
// 点击时初始化这个渐变
// 并调用我们的渐变函数
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
参考代码：
复制代码 代码如下:
<div>
<button>Fade to fifty percept opacity</button>
.highlight();
醒目（highlight）是一个目标非常明确（也极其有用）的渐变快捷方法，它提供了两个功能：
使用它来平滑变化到一种不同的背景色
直接设置一个不同的背景色，然后平滑变化到另外一个背景色
这些在创建用户反馈时非常有用。例如，你可以在一个东西被选中时让某个元素闪一下，或者你改变一下颜色，然后当它保存或者关闭时再闪一下。这有非常多的选择，而且非常简单易用。在这个例子中，让我们创建两个div，然后分别添加两种类型的醒目（highlight）方法：
参考代码：
复制代码 代码如下:
// 创建一个函数
var tweenHighlight = function(event) {
// 这里我们使用了event.target，这是从这个函数中传过来的参数
// 这个意思是指“触发事件的目标（来源）”
// 由于这个效果应用到触发事件的元素上面
// 因此我们不需要再创建选择器
// 注意：addEvent将会自动把event对象作为参数传入这个调用函数
// ... 非常方便
event.target.highlight('#eaea16');
}
// 创建一个函数
// 你需要传入一个参数
// 由于这个函数是在一个事件（event）里面被调用的
// 这个函数将会自动传入event对象
// 然后你就可以通过.target来引用这个元素
// （event的目标元素）
var tweenHighlightChange = function(item) {
// 这里我们不是使用一个颜色，而是添加了一个逗号来分隔第二个
// 这将设置第一个颜色，然后变化到第二个颜色
item.target.highlight('#eaea16', '#333333');
}
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
参考代码：
复制代码 代码如下:
<div></div>
<div></div>
快捷方法示例
这里是一些效果的快捷方法的在线的示例。你可以按不同顺序点击这些按钮，然后注意一下它们的变化：
参考代码：
复制代码 代码如下:
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
// .fade 也可以接受'out'和'in'作为参数，相当于0和1
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
event.target.highlight('#eaea16');
}
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
参考代码：
复制代码 代码如下: