今天我们开始第三讲，我们今天主要看一下。和我们看到的其他的MooTools函数一样，这些方法使用起来都非常简单，但是功能都很强大。Tween可以让你添加那些极炫的效果可以很平滑地发生形变动画，从而改善你的用户体验。
Tween的快捷方法我们通常都从基本知识入手，不过MooTools 1.2只为渐变（tween）提供了这样极其出色的快捷方法，它们使用起来都极其简单以至于我忍不住要从这里开始。
.tween();
一个渐变（tween）是一个在两个样式属性值之间的平滑的变化。举个例子，通过渐变（tween）你可以把div的宽度（width）平滑地由100像素变化为300像素。
参考代码： tweenerFunction = () { $().tween(, );} window.addEvent(, () { $().addEvent(, tweenerFunction);});相应于上面的代码，我们的HTML代码看起来大概应该是这样的：
参考代码： div id=/divbutton id= width/button.fade();
这个方法可以让你平滑地调整一个元素的不透明度（opacity）。这个使用起来和上面的例子几乎一模一样：
参考代码： tweenFadeFifty = () { $().fade();} window.addEvent(, () { $().addEvent(, tweenFadeFifty);});参考代码： div id=button id=Fade to fifty percept opacity/button.highlight();
醒目（highlight）是一个目标非常明确（也极其有用）的渐变快捷方法，它提供了两个功能：
使用它来平滑变化到一种不同的背景色 直接设置一个不同的背景色，然后平滑变化到另外一个背景色这些在创建用户反馈时非常有用。例如，你可以在一个东西被选中时让某个元素闪一下，或者你改变一下颜色，然后当它保存或者关闭时再闪一下。这有非常多的选择，而且非常简单易用。在这个例子中，让我们创建两个div，然后分别添加两种类型的醒目（highlight）方法：
参考代码： tweenHighlight = (event) { event.target.highlight();} tweenHighlightChange = (item) { item.target.highlight(, );} window.addEvent(, () { $().addEvent(, tweenHighlight); $().addEvent(, tweenHighlightChange);});参考代码： div id=/divdiv id=/div快捷方法示例
这里是一些效果的快捷方法的在线的示例。你可以按不同顺序点击这些按钮，然后注意一下它们的变化：
参考代码： tweenerFunction = () { $().tween(, );} tweenerGoBack = () { $().tween(, );} tweenFadeOut = () { $().fade();} tweenFadeFifty = () { $().fade();} tweenFadeIn = () { $().fade();} tweenHighlight = (event) { event.target.highlight();} window.addEvent(, () { $().addEvent(, tweenerFunction); $().addEvent(, tweenerGoBack); $().addEvent(, tweenFadeOut); $().addEvent(, tweenFadeFifty); $().addEvent(, tweenFadeIn); $().addEvent(,tweenHighlight);});参考代码： div id=/divbr /button id= width/buttonbutton id= width/buttonbutton id=Fade Out/buttonbutton id=Fade to % opacity/buttonbutton id=Fade In/button参考代码： #tweener { : : : #}把鼠标移上去可以看到第一种类型的醒目效果。
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）更多渐变（Tween）
创建一个新的渐变
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）如果你想更灵活多变和更多地控制你的变化效果，你可能想创建一个新的形变动画来替代那些快捷方式。注意使用new来创建一个新的Fx.Tween的实例：
参考代码： window.addEvent(, () { newTweenElement = $(); newTween = Fx.Tween(newTweenElement);});参考代码： div id=/div button id=Set/div通过渐变设置样式
一旦你从一个元素创建了一个新的渐变，你可以轻松地通过.set()方法设置一个样式属性。这个和.setStyle()方法一样。
参考代码： newTweenSet = () { .set(, );}就像我们以前学习的，我们想要把我们的函数从domready事件中独立出来，但是在这个例子中，我们想要在domready事件中创建一个渐变，然后在外部引用它。我们已经掌握了一种在domready之外传递参数的方法（通过创建一个匿名函数并传递一个参数），今天我们要学习一种Moo化的更好的方式来传递渐变对象（这并不是说匿名函数在任何时候都不再合适）。
.bind();
通过.bind();，我们可以让一个函数里面的this等同于参数：
参考代码： $().addEvent(, newTweenSet.bind(newTween));因此，现在我们再看看上面的这个函数，this现在就等同于newTween了（就是我们的tween对象）。
现在我们把这些东西放在一起看看：
参考代码： newTweenSet = () { .set(, );} window.addEvent(, () { newTweenElement = $(); newTween = Fx.Tween(newTweenElement); $().addEvent(, newTweenSet.bind(newTween)); });启动一个渐变效果
现在，我们已经设置好了我们所有的渐变对象，我们的函数在domready事件之外，我们也学习了如何通过.set();方法设置一个样式表属性，我们来看看实际的渐变。启动一个渐变非常简单，和.fade();非常类似，总共有两种方式来使用.start();方法：
让一个属性值从当前值变化到另外一个值 先设置一个属性值，然后变化到另外一个值参考代码： newTween.start(, ); newTween.start(, , );现在，你就可以在一个函数内部通过使用.start();方法来启动这个渐变了，如果你使用了在函数上通过.bind();方法绑定了newTween，你可以使用this。
以上这些就是到现在为止全部的渐变（tween）了
尽管如此，关于渐变效果仍然有许多可以讲的。例如，如果你想一次同时渐变多个样式表属性，你可以使用.morph();方法。你还可以使用过渡效果库（transition）来改变它们进行过渡。不过这篇教程已经足够长了，因此我们把这些留在以后再讲。
更多学习包含一个MooTools 1.2的库，上面的例子，一个外部JavaScript文件，一个简单的HTML文件和一个CSS文件。
和以前一样，你最好的资源是MooTools 1.2的文档。
关于方法的信息 还有，浏览一下方法和库
