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