搜尋

隨機推薦

30天學會 MooTools 教學(11): Fx.Morph、Fx選項和Fx事件

今天,我們繼續探索一下這個庫的Fx部分,我們將學習如何使用Fx.Morph(它從本質上可以讓你同時漸變多個樣式表屬性),然後我們再檢查一下 應用到Fx.Tween和Fx.Morph的一些Fx選項,最後我們將看看如何使用Fx事件,譬如「onComplete」和「onStart」。通過這 些選項和事件,我們可以獲得更好的控制權來控制形變動畫。

廣告

 

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>


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這一節,還有tweenmorphtransitions

下載一個包含你開始所需要的東西的zip包
包括這個頁面上的實例,MooTools 1.2核心庫,一個外部的JavaScript文件,一個外部的CSS文件或者一個簡單的html文件。

 

Mootools 教學列表:

 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.