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

// 首先，把我們的元素賦值給一個變量
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>

// 建立你的漸變或者形變
// 然後在大括號{ }之間設置你的選項
var morphObject = new Fx.Morph(morphElement, {
    // 首先是選項的名字
    // 然後後面跟一個冒號（:）
    // 然後定義你的選項
    duration: 'long',
    transition: 'sine:in'
});

// 建立你的漸變或者形變
// 然後在大括號{ }之間設置你的選項
var morphObject = new Fx.Morph(morphElement, {
    fps: 60
});
 
// 或者這樣
var framesPerSecond = 60;
 
var tweenObject = new Fx.Tween(tweenElement, {
    fps: framesPerSecond
});

// 建立你的漸變或者形變
// 然後在大括號{ }之間設置你的選項
var morphObject = new Fx.Morph(morphElement, {
    unit: '%'
});

// 建立你的漸變或者形變
// 然後在大括號{ }之間設置你的選項
var morphObject = new Fx.Morph(morphElement, {
    link: 'chain'
});

// 建立你的漸變或者形變
// 然後在大括號{ }之間設置你的選項
var morphObject = new Fx.Morph(morphElement, {
    duration: 'long'
});
 
// 或者這樣
var morphObject = new Fx.Morph(morphElement, {
    duration: 1000
});

var tweenObject = new Fx.Tween(tweenElement, {
    transition: 'quad:in'
});

// 首先我們把一個新的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)
    });