Mootools1.4 – Fx.Morph類的源碼分析，如果理解有誤歡迎指正：
/*
—
name: Fx.Morph
description: Formerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules.
license: MIT-style license.
requires: Fx.CSS
provides: Fx.Morph
源碼分析: 苦苦的苦瓜(http://hmking.blog.51cto.com)
…
*/
// #region – Fx.Morph –
/**
* @Fx.Morph: 提供一次對多個CSS屬性進行動畫特效變換的功能，所以本類的屬性為多值集合
**/
Fx.Morph = new Class({
// 繼承自Fx.CSS
Extends: Fx.CSS,
/**
* @method: initialize
* @param element – (mixed) 元素的id或引用
* @param options – options – (object, 可選) Fx類中提供的可選項
* @description: 構造函數，提供將多個元素的CSS屬性值從一個值向另一個值進行轉化的功能
**/
initialize: function (element, options) {
// element屬性存儲特效所作用的元素對象
this.element = this.subject = document.id(element);
// 調用父類的同名方法
this.parent(options);
},
/**
* @method: set
* @param now – (mixed) 可以是包含CSS屬性鍵值對的對象, 或是一個CSS選擇器(必須在頁面中已定義).如果對CSS屬性隻給出一個值,則變換的時候將把元素當前的屬性值作為起始值.
* {
* 'height': 200,
* 'width': 200,
* 'background-color': '#f00',
* 'opacity': 0
* }
* @returns: (object) 主調Fx.Morph實例
* @description: 將元素的指定CSS屬性值立即設為指定值
**/
set: function (now) {
// 如果參數是字符串類型，表示為CSS選擇符，從當頁頁面的樣式規則中查找指定的規則
if (typeof now == 'string') {
now = this.search(now);
}
// 分別設置每一項樣式值
for (var p in now) {
this.render(this.element, p, now[p], this.options.unit);
}
return this;
},
/**
* @method: compute
* @param from – (object) 解釋過的各項樣式屬性的起始值的對象
* @param to – (object) 解釋過的各項樣式屬性的結束值的對象
* @param delta – (mixed) 特效變化所需要的比例因子
* @returns: (array) 包含計算過的各項樣式屬性當前值信息的一個數組
* @description: 根據各項樣式屬性初始值，結束值和特效比例因子計算各項樣式屬性的當前值
**/
compute: function (from, to, delta) {
var now = {};
for (var p in from) {
// 對每一項樣式屬性，調用Fx.CSS類的同名方法計算
now[p] = this.parent(from[p], to[p], delta);
}
return now;
},
/**
* @method: start
* @param roperties – (mixed) 可以是包含CSS屬性鍵值對的對象, 或是一個CSS選擇器(必須在頁面中已定義).如果對CSS屬性隻給出一個值，則變換的時候將把元素當前的屬性值作為起始值.
* {
* 'height': [10, 100],
* 'width': [900, 300],
* 'opacity': 0,
* 'background-color': '#00f'
* }
* @returns: (object) – 主調Fx.Morph實例
* @description: 串聯執行多個CSS屬性的變換(並觸發'start'事件)
* @notes:
* 如果傳入一個CSS選擇器, 則該選擇器必須在頁面存在相應匹配的樣式
* 不支持多選擇器(逗號分隔的多個選擇器)
* @import'ed CSS rules will not be available for Morph calls. All CSS selectors must be present in CSS directly loaded into the page.
**/
start: function (properties) {
// 檢查當前特效運行狀態，決定是否運行新特效
if (!this.check(properties)) { return this; }
// 如果提供properties參數類型為字符串，表明指定的是CSS選擇符名，需要從當前頁的樣式規則中查找各項屬性
if (typeof properties == 'string') {
properties = this.search(properties);
}
var from = {},
to = {};
// 對每項CSS屬性值計算解釋後的值，此時的from和to對象每個鍵值皆為一個數組
for (var p in properties) {
var parsed = this.prepare(this.element, p, properties[p]);
from[p] = parsed.from;
to[p] = parsed.to;
}
// 調用Fx類的構造函數
return this.parent(from, to);
}
});
// #endregion
// #region – Element.Properties.morph –
/**
* @element property: morph
* @description: 用於設置或獲取元素上的Fx.Morph實例，實現單件模式
**/
Element.Properties.morph = {
// setter設置Fx.Morph對象參數
set: function (options) {
// 獲取元素上的Fx.Morph實例後先執行cancel方法，取消特效的執行，然後再設置可選參數
this.get('morph').cancel().setOptions(options);
return this;
},
// getter獲取Fx.Morph對象
get: function () {
// 先從臨時對象讀取，看有沒緩存到Fx.Morph實例
var morph = this.retrieve('morph');
if (!morph) {
// 如果沒有緩存，則保存一個新的Fx.Morph實例
morph = new Fx.Morph(this, { link: 'cancel' });
this.store('morph', morph);
}
return morph;
}
};
// #endregion
// #region – Element Method –
// 元素調用Fx.Morph的快捷方式
Element.implement({
/**
* @element method: morph
* @param properties – (mixed) 可以是包含CSS屬性鍵值對的對象, 或是一個CSS選擇器(必須在頁面中已定義).如果對CSS屬性隻給出一個值,則變換的時候將把元素當前的屬性值作為起始值.
* @returns: (element) 返回主調元素
* @description: 對元素執行指定屬性值的動畫特效變換
**/
morph: function (props) {
// 這是使用上面的getter取Fx.Morph實例，再start，props可以為多個樣式屬性數組或CSS選擇符
this.get('morph').start(props);
return this;
}
});
// #endregion
作者“苦苦的苦瓜”