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