MooTools1.4源码分析- Fx.Tween

Mootools1.4 - Fx.Tween类的源码分析，如果理解有误欢迎指正：

/*
---

name: Fx.Tween

description: Formerly Fx.Style, effect to transition any CSS property for an element.

license: MIT-style license.

requires: Fx.CSS

provides: [Fx.Tween, Element.fade, Element.highlight]

源码分析: 苦苦的苦瓜(http://hmking.blog.51cto.com)

...
*/

// #region - Fx.Tween -

/**
* @Fx.Tween: 对元素单个样式属性执行一个特效
**/
Fx.Tween = new Class({

    // 继承自Fx.CSS
    Extends: Fx.CSS,

    /**
    * @method: initialize
    * @param element - (mixed) 元素的id或引用
    * @param options - (object, 可选) 类可用的所有可选项, 以及如下的可选项:
    *       property - (string, 默认为null) 变换的目标CSS属性,例如:'width', 'color', 'font-size', 'border'等.
    *                               如果在此省略该可选项, 则在执行start或set方法时,需要在方法的第一个参数上指定一个CSS属性.
    * @description: 构造函数，提供将元素的一个CSS属性值从一个值向另一个值进行转化的功能
    * @notes:
    *       任何可以用Element:setStyle设置的CSS属性都可以用于Fx.Tween
    *       如果不是可计算型的CSS属性, 如border-style 或 background-image等, 则只是简单的设置它的值
    *       如果使用了property可选项, 则在调用start和set方法时就不用再指定CSS属性
    **/
    initialize: function (element, options) {
        // element属性存储特效所作用的元素对象
        this.element = this.subject = document.id(element);
        // 调用父类的同名方法
        this.parent(options);
    },

    /**
    * @method: set
    * @param property - (string) css属性(如果在构造函数中设置了property可选项, 则该处可以省略)
    * @param now - (mixed) css属性值
    * @description: 将元素的指定CSS属性值立即设置为指定的值
    * @returns: (object) 主调Fx.Tween实例
    * @notes:
    *       如果使用了property可选项, 或者在start方法中指定了CSS属性参数，则在调用set方法时就不用指定CSS属性参数
    **/
    set: function (property, now) {
        // 如果只提供一个参数
        if (arguments.length == 1) {
            // 将此参数作为目标值
            now = property;
            // 取CSS属性，首先取Fx实例的property属性存储的CSS属性名
            property = this.property || this.options.property;
        }
        // 最终渲染效果
        this.render(this.element, property, now, this.options.unit);
        return this;
    },

    /**
    * @method: start
    * @param property - (string) 要进行变换的css属性(如果在构造函数中设置了property可选项, 则该处可以省略)
    * @param from - (mixed) CSS属性起始值。如果整个方法只给出一个参数，则该值作为CSS属性的结束值
    * @param to - (mixed, 可选) CSS属性结束值
    * @description: 将元素的CSS属性值过度到指定值
    * @notes:
    *       如果整个方法只给出一个参数,则该值作为CSS属性的结束值, 起始值则从元素的当前状态计算而来
    *       当变换颜色类的CSS属性时, 既可使用RGB格式也可以使用十六进制格式
    *       如果在构造函数中设置了property可选项, 则在调用start方法时就不用指定CSS属性参数
    **/
    start: function (property, from, to) {
        // 检查当前特效运行状态，决定是否运行新特效
        if (!this.check(property, from, to)) { return this; }
        // 将参数降维
        var args = Array.flatten(arguments);
        // 取CSS属性，首先判断有没有设置property可选项
        this.property = this.options.property || args.shift();
        // 调用父类Fx.CSS的prepare方法解释参数，得到from和to值
        var parsed = this.prepare(this.element, this.property, args);
        // 调用Fx基类的同名方法，开始执行特效
        return this.parent(parsed.from, parsed.to);
    }

});

// #endregion

// #region - Element.Properties.tween -

/**
* @element property: tween
* @description: 用于设置或获取元素上的Fx.Tween实例，实现单件模式
* @notes:
*       01、When initializing the Element's tween instance with Element:set, the property to tween SHOULD NOT be passed.
*               当使用Element:set方法来设置元素的tween时, 则要进行tween的css属性<不需要>传入
*       02、The property must be specified when using Element:get to retrieve the actual Fx.Tween instance, and in calls to Element:tween
*               当使用Element:get方法来获取元素的Fx.Tween实例时, 则可选项中的property必须指定
*       03、When options are passed to the setter, the instance will be reset.
*               当使用setter方法设置可选参数时，Fx.Tween实例对象会被重置
*       04、As with the other Element shortcuts, the difference between a setter and a getter is that the getter returns the instance, while the setter returns the element (for chaining and initialization).
*               调用get方法获取tween返回的是Fx.Tween的实例, 而调用set返回的是主调元素
*       05、当使用get方法时, 如果元素上还不存在tween, 则会根据给出的可选项新建一个实例设置到元素上
**/
Element.Properties.tween = {

补充：web前端 , JavaScript ,