MooTools1.4源碼分析- Fx.Morph

 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
 
作者“苦苦的苦瓜”