Mootools 1.2教程 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 } 把鼠标移上去可以看到第一种类型的醒目效果 。 300 width 100 width Fade Out Fade to 50% opacity Fade In 更多渐变（Tween） 创建一个新的渐变 如果你想更灵活多变和更多地控制你的变化效果，你可能想创建一个新的形变动画来替代那些快捷方式 。注意使用“new”来创建一个新的Fx.Tween的实例： 参考代码： 复制代码 代码如下: window.addEvent(domready, function() { // 首先我们把要变化的元素赋值给一个变量 var newTweenElement = $(newTween); // 现在我们创建一个动画事件，然后把这个元素作为参数传入 var newTween = new Fx.Tween(newTweenElement); }); 参考代码： 复制代码 代码如下: <!-- 这个是我们要应用渐变效果的元素 --> <div id="newTween"></div> <!-- 这个是启动渐变效果的按钮 --> <button id="netTween_set">Set</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 newTween.start(width, 100px, 300px); 现在，你就可以在一个函数内部通过使用.start();方法来启动这个渐变了，如果你使用了在函数上通过.bind();方法绑定了“newTween”，你可以使用“this” 。 以上这些就是到现在为止全部的渐变（tween）了…… 尽管如此，关于渐变效果仍然有许多可以讲的 。例如，如果你想一次同时“渐变”多个样式表属性，你可以使用.morph();方法 。你还可以使用过渡效果库（transition）来改变它们进行过渡 。不过这篇教程已经足够长了，因此我们把这些留在以后再讲 。 更多学习……下载一个包含你开始所需要的东西的zip包 包含一个MooTools 1.2的库，上面的例子，一个外部JavaScript文件，一个简单的HTML文件和一个CSS文件 。 和以前一样，你最好的资源是MooTools 1.2的文档 。
|
