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

MooTools 1.2的渐变

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《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
}

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

 





更多渐变(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的文档。

2 Comments

  1. 你好 站长 我想知道用tween怎么样可以让动画效果的DIV 不是只是向一个方向有动画延伸 而是编程扩散的那种动画

Leave a Reply to Fdream Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.