|
|
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的文檔。
- 關于.tween();方法的信息
- 還有，瀏覽一下.morph();方法和transitions庫
JavaScript技術：Mootools 1.2教程 Fx.Tween的使用，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
