Mootools 1.2教程(10)——Fx.Tween的使用

原文地址：30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.Tween

MooTools 1.2的渐变

阅读上一讲：Mootools 1.2教程(9)——输入过滤第二部分（字符串）

今天我们开始第三讲，我们今天主要看一下Fx.Tween。和我们看到的其他的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 id="tweener"></div> 
<button id="tween_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 id="tweener"> 
<button id="tween_fade_fifty">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 id="tweener"></div> 
<div id="tweenerChange"></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); 

参考代码： 

<div id="tweener"></div><br /> 
<button id="tween_button">300 width</button> 
<button id="tween_reset">100 width</button> 
<button id="tween_fade_out">Fade Out</button> 
<button id="tween_fade_fifty">Fade to 50％ opacity</button> 
<button id="tween_fade_in">Fade In</button>

参考代码： 

#tweener { 
    height: 100px 
    width: 100px 
    background-color: #3399CC 

把鼠标移上去可以看到第一种类型的醒目效果。