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

更多渐变（Tween）

创建一个新的渐变

如果你想更灵活多变和更多地控制你的变化效果，你可能想创建一个新的形变动画来替代那些快捷方式。注意使用“new”来创建一个新的Fx.Tween的实例：

参考代码： 

window.addEvent('domready', function() { 
    // 首先我们把要变化的元素赋值给一个变量 
    var newTweenElement = $('newTween'); 

       // 现在我们创建一个动画事件，然后把这个元素作为参数传入 
       var newTween = new Fx.Tween(newTweenElement); 

参考代码： 

<!-- 这个是我们要应用渐变效果的元素 --> 
<div id="newTween"></div> 

<!-- 这个是启动渐变效果的按钮 --> 

通过渐变设置样式

一旦你从一个元素创建了一个新的渐变，你可以轻松地通过.set()方法设置一个样式属性。这个和.setStyle()方法一样。

参考代码： 

var newTweenSet = function() { 
    // 注意"this"的使用 
    // 学习如何使用"this" 
    this.set('width', '300px'); 

就像我们以前学习的，我们想要把我们的函数从domready事件中独立出来，但是在这个例子中，我们想要在domready事件中创建一个渐变，然后在外部引用它。我们已经掌握了一种在domready之外传递参数的方法（通过创建一个匿名函数并传递一个参数），今天我们要学习一种Moo化的更好的方式来传递渐变对象（这并不是说匿名函数在任何时候都不再合适）。

.bind();

通过.bind();，我们可以让一个函数里面的“this”等同于参数：

参考代码： 

// 首先我们给上面我们看到的那个按钮添加一个点击事件 
// 然后，不只是仅仅调用这个函数 
// 我们调用这个函数并且添加".bind()" 
// 然后我们替换掉任何我们要传递给函数的 
// 现在，在这个"newTweenSet"函数内部，"this"将指向"newTween" 
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

因此，现在我们再看看上面的这个函数，“this”现在就等同于“newTween”了（就是我们的tween对象）。

现在我们把这些东西放在一起看看：

参考代码： 

// 这里是我们的函数 
var newTweenSet = function() { 
    // 由于我们使用了bind，现在"this"就指向了"newTween" 
    // 因此，这里的相当于是： 
    // newTween.set('width', '300px') 
    this.set('width', '300px'); 
} 

window.addEvent('domready', function() { 
    // 首先把我们的元素赋值给一个变量 
    var newTweenElement = $('newTween'); 

    // 然后我们new一个FX.Tween，然后赋值给一个变量 
    var newTween = new Fx.Tween(newTweenElement); 

    // 现在添加我们的事件，并绑定newTween和newTweenSet 
    $('netTween_set').addEvent('click', newTweenSet.bind(newTween));   
});

启动一个渐变效果

现在，我们已经设置好了我们所有的渐变对象，我们的函数在domready事件之外，我们也学习了如何通过.set();方法设置一个样式表属性，我们来看看实际的渐变。启动一个渐变非常简单，和.fade();非常类似，总共有两种方式来使用.start();方法：

• 让一个属性值从当前值变化到另外一个值

参考代码： 

// 这将让宽度（width）从当前已经存在的值变化到300px 
newTween.start('width', '300px'); 

// 这将首先设置宽度（width）为100px，然后变化到300px 

现在，你就可以在一个函数内部通过使用.start();方法来启动这个渐变了，如果你使用了在函数上通过.bind();方法绑定了“newTween”，你可以使用“this”。

以上这些就是到现在为止全部的渐变（tween）了……

尽管如此，关于渐变效果仍然有许多可以讲的。例如，如果你想一次同时“渐变”多个样式表属性，你可以使用.morph();方法。你还可以使用过渡效果库（transition）来改变它们进行过渡。不过这篇教程已经足够长了，因此我们把这些留在以后再讲。

更多学习……

远程下载：下载一个包含你开始所需要的东西的zip包

下载地址：mootorial_day10_fx_tween.zip

包含一个MooTools 1.2的库，上面的例子，一个外部JavaScript文件，一个简单的HTML文件和一个CSS文件。

和以前一样，你最好的资源是MooTools 1.2的文档。

• .tween();

• 方法的信息




• .morph();

• 方法和

transitions

• 库