|
|
Fx.Morph
創(chuàng)建一個新的Fx.Morph
初始化一個新的形變和創(chuàng)建一個新的漸變很類似，除了你要指定多個樣式屬性以外。
參考代碼：
復(fù)制代碼 代碼如下:
// 首先，把我們的元素賦值給一個變量
var morphElement = $('morph_element');
// 現(xiàn)在，我們創(chuàng)建一個新的形變
var morphObject = new Fx.Morph(morphElement);
// 現(xiàn)在我們可以設(shè)置樣式屬性，就像Fx.Tween一樣
// 不過我們這里可以設(shè)置多個樣式屬性
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
// 我們也可以像啟動一個漸變一樣來啟動我們的形變
// 不過我們這里要同時放置多個屬性值
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
上面這些就是全部的內(nèi)容了，包括創(chuàng)建、設(shè)置和啟動一個形變。
為了讓這個更合理一些，我們應(yīng)該創(chuàng)建我們的變量，把我們的函數(shù)獨立出來，并創(chuàng)建一些事件來控制這這個事情：
參考代碼：
復(fù)制代碼 代碼如下:
var morphSet = function(){
// 這里我們可以像Fx.Tween一樣設(shè)置樣式屬性
// 不過在這里我們可以同時設(shè)置多個樣式屬性
this.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
// 我們也可以像啟動一個漸變一樣啟動一個形變
// 不過現(xiàn)在我們可以同時設(shè)置多個樣式屬性
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
// 設(shè)置為最開始的值
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
// 首先，把我們的元素賦值給一個變量
var morphElement = $('morph_element');
// 現(xiàn)在，我們創(chuàng)建我們的形變
var morphObject = new Fx.Morph(morphElement);
// 在這里我們給按鈕添加點擊事件
// 并且綁定morphObject和這個函數(shù)
// 從而可以在上面的函數(shù)中使用"this"
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});
參考代碼：
復(fù)制代碼 代碼如下:
<div id="morph_element"></div>
<button id="morph_set">Set</button>
<button id="morph_start">Start</button>
<button id="morph_reset">reset</button>
SetStartreset
Fx選項（Options）
下面的選項都可以被Fx.Tween和Fx.Morph接受。它們都非常容易實現(xiàn)，而且可以給你非常多的控制權(quán)來控制你的效果。要使用這些選項，請使用下面的語法：
參考代碼：
復(fù)制代碼 代碼如下:
// 建立你的漸變或者形變
// 然后在大括號{ }之間設(shè)置你的選項
var morphObject = new Fx.Morph(morphElement, {
// 首先是選項的名字
// 然后后面跟一個冒號（:）
// 然后定義你的選項
duration: 'long',
transition: 'sine:in'
});
fps（每秒幀數(shù)，frames per second）
這個選項決定了這個動畫每秒的幀數(shù)。默認值是50，可以接受數(shù)字和值為數(shù)字的變量。
參考代碼：
復(fù)制代碼 代碼如下:
// 建立你的漸變或者形變
// 然后在大括號{ }之間設(shè)置你的選項
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// 或者這樣
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});
unit（單位）
這個選項設(shè)置了數(shù)字的單位。例如，你的100是指100個像素（px）、百分比還是em？
參考代碼：
復(fù)制代碼 代碼如下:
// 建立你的漸變或者形變
// 然后在大括號{ }之間設(shè)置你的選項
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
link（連接）
link選項提供了一種方式可以讓你管理多個啟動效果的函數(shù)調(diào)用。例如，如果你有一個鼠標(biāo)移上去（mouseover）的效果，你是希望每次用戶移上去都啟動這個效果嗎？或者是，如果一個人把鼠標(biāo)移上去兩次，它應(yīng)該忽略第二個響應(yīng)還是應(yīng)該把它們串連起來，然后等第一次調(diào)用完成以后再第二次調(diào)用這個效果？link又三個設(shè)置：
“ignore”（默認）――在一個效果沒有完成之前忽略任何啟動新效果的調(diào)用
“cancel”――如果有另外一個效果調(diào)用，則放棄當(dāng)前的效果，轉(zhuǎn)而處理新的效果調(diào)用
“chain”――鏈可以讓你把效果像“鏈條”一樣把效果連接起來，把這些調(diào)用進行堆棧，然后逐一調(diào)用這些效果，直到完成
參考代碼：
復(fù)制代碼 代碼如下:
// 建立你的漸變或者形變
// 然后在大括號{ }之間設(shè)置你的選項
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
duration（持續(xù)時間）
duration可以讓你定義這個動畫的持續(xù)時間。持續(xù)事件和速度是不一樣的，因此如果你想讓一個對象在一秒內(nèi)移動100個像素，那么它將比一個每秒移動1000個像素的對象要慢。你可以輸入一個數(shù)字（以毫秒為單位）、一個值為數(shù)字的變量或者三個快捷方式：
“short”=250ms
“normal”=500ms（默認）
“l(fā)ong”=1000ms
參考代碼：
復(fù)制代碼 代碼如下:
// 建立你的漸變或者形變
// 然后在大括號{ }之間設(shè)置你的選項
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
// 或者這樣
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
transition（過渡效果）
最后一個選項：transition，可以讓你決定過渡類型。例如，它是不是一個平滑的過渡或者它應(yīng)該先慢慢開始然后加速直到結(jié)束。看看這些在MooTools的核心庫里可以用的過渡效果：
參考代碼：
復(fù)制代碼 代碼如下:
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
注意：第一個過渡條在開始時觸發(fā)了一個紅色的醒目效果，在結(jié)束時觸發(fā)了一個橙色的醒目效果。看看下面是怎么使用Fx的事件的。
這上面30個過渡類型可以分成十組：
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
每一個組都有三個選項：
Ease In
Ease Out
Ease In Out
Fx的事件
Fx的事件使得你在動畫效果的執(zhí)行過程中，在不同的點執(zhí)行一些代碼。在創(chuàng)建用戶反饋信息時這會很有用，這也給了你另一層控制權(quán)來控制你的漸變和形變：
onStart――當(dāng)Fx開始時觸發(fā)
onCancel――當(dāng)Fx取消時觸發(fā)
onComplete――當(dāng)Fx完成時觸發(fā)
onChainComplete――當(dāng)Fx鏈完成時觸發(fā)
當(dāng)你建立一個漸變或者形變時，你可以設(shè)置這其中的一個事件，就像你設(shè)置一個或多個選項一樣，不過不是設(shè)置一個值，而是設(shè)置一個函數(shù)：
參考代碼：
復(fù)制代碼 代碼如下:
// 首先我們把一個新的Fx.Tween賦值給一個變量
// 然后定義我們要漸變的元素
quadIn = new Fx.Tween(quadIn, {
// 這里是一些選項
link: 'cancel',
transition: ‘quad:in',
// 這里是一些事件
onStart: function(passes_tween_element){
// 這些事件都會傳遞漸變的對象
// 因此當(dāng)動畫開始時
// 這里我們調(diào)用一個"highlight"效果
passes_tween_element.highlight('#C54641');
},
// 注意這個逗號是怎樣始終出現(xiàn)在每個事件和選項之間的
// 但是最后一個事件或者選項后面沒有
onComplete: function(passes_tween_element){
// 在結(jié)束時，我們再應(yīng)用一個highlight效果
passes_tween_element.highlight('#C54641');
}
});
示例
為了生成上面的變形代碼，我們可以用一種我們在這個系列的教程中還沒有見過的方式來重用我們的函數(shù)。這上面所有的變形元素都使用了兩個函數(shù)，一個當(dāng)鼠標(biāo)進入時漸變淡出，另外一個在當(dāng)鼠標(biāo)離開時漸變返回：
參考代碼：
復(fù)制代碼 代碼如下:
// 這是我們在鼠標(biāo)進入時調(diào)用的函數(shù)
// 寬度漸變到700px
var enterFunction = function() {
this.start('width', '700px');
}
// 這是我們在鼠標(biāo)離開時調(diào)用的函數(shù)
// 寬度漸變回300px
var leaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
// 這里我們把一些元素賦值給變量
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// 然后我們創(chuàng)建三個漸變元素
// 分別對應(yīng)上面的三個變量
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
// 現(xiàn)在我們添加鼠標(biāo)進入和鼠標(biāo)離開事件
// 注意.addEvents的使用
// 則和.addEvent的使用類似
// 不過你可以通過下面的模式添加多個事件
$('quadin').addEvents({
// 首先，你要說明是什么事件，并把事件用單引號引起來
// 然后后面跟一個冒號（:）
// 最后放置你的函數(shù)
// 在這個例子中，函數(shù)banding到這個漸變對象
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
// 注意我們這里是怎樣重復(fù)使用這個函數(shù)的
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
// 我們這里也使用了那些同樣的函數(shù)
// 不過每次我們都應(yīng)用一個事件到不同的元素
// 并且綁定不同的漸變
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
更多學(xué)習(xí)……
你可以通過Fx庫里面的工具來獲得對效果更細致的控制權(quán)。請一定要閱讀一下文檔中的Fx這一節(jié)，還有tween、morph和transitions。
下載一個包含你開始所需要的東西的zip包
包括這個頁面上的實例，MooTools 1.2核心庫，一個外部的JavaScript文件，一個外部的CSS文件或者一個簡單的html文件。
JavaScript技術(shù)：Mootools 1.2教程 Fx.Morph、Fx選項和Fx事件，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
