[转帖]Mootools源码分析-31 -- Fx.Morph

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-406222

原作者：我佛山人

 

//变形动画，由多个属性的动画叠加形成，所以本类的属性为多值集合
Fx.Morph = new Class({
    //继承自Fx.CSS
    Extends: Fx.CSS,

    //构造函数，会覆盖父类的构造函数
    initialize: function(element, options)    {
        //覆盖父类的构造函数是为了添加element参数
        this.element = this.subject = $(element);
        /*
        调用父类的同名方法，固定的用法，一般情况下也可以用this.parent
        截至1543版本，已经完全可以抛弃arguments.callee直接使用this，但是由于Opera不支持caller，不够完美
        */
        arguments.callee.parent(options);
    },

    //直接覆盖父类的同名方法，参考Fx基类
    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;
    },

    //计算各项样式属性的当前值
    compute: function(from, to, delta)    {
        var now = {};
        //对每一项样式属性，调用Fx.CSS类的同名方法计算
        for (var p in from)    now[p] = arguments.callee.parent(from[p], to[p], delta);
        return now;
    },

    //覆盖父类同名方法，参考Fx基类
    start: function(properties)    {
        //检查当前特效运行状态，决定是否运行新特效
        if (!this.check(properties))    return this;
        //如果提供properties参数类型为字符串，表明指定的是CSS选择符名，需要从当前页的样式规则中查找各项属性
        if (typeof properties == 'string')    properties = this.search(properties);
        var from = {}, to = {};
        //对每项CSS属性值计算解释后的值
        for (var p in properties)    {
            var parsed = this.prepare(this.element, p, properties[p]);
            from[p] = parsed.from;
            to[p] = parsed.to;
        }
        //调用Fx类的同名方法
        return arguments.callee.parent(from, to);
    }
});

//静态属性，用于element.set和element.get，实现单件模式
Element.Properties.morph = {
    //setter设置Fx.Morph对象参数
    set: function(options)    {
        //先从临时对象读取，看有没缓存到Fx.Morph实例
        var morph = this.retrieve('morph');
        //如果存在，取消执行中的特效
        if (morph)    morph.cancel();
        //删去旧对象，用新配置项保存为新对象
        return this.eliminate('morph').store('morph:options', $extend({link: 'cancel'}, options));
    },

    //getter获取Fx.Morph对象
    get: function(options)    {
        //如果提供参数或者尚未存在与当前Element关联的Fx.Morph实例
        if (options || !this.retrieve('morph'))    {
            //如果提供参数并且未保存关联的Fx.Morph实例的参数，调用setter设置参数
            if (options || !this.retrieve('morph:options'))    this.set('morph', options);
            //保存Fx.Morph实例
            this.store('morph', new Fx.Morph(this, this.retrieve('morph:options')));
        }
        return this.retrieve('morph');
    }
};

Element.implement({
    //Fx.Morph的快捷方式，遗憾的这里不支持参数设置，需要手工调用elemenet.set('tween', options)设置
    morph: function(props)    {
        /*
        这是使用上面的getter取Fx.Morph实例，再start
        props可以为多个样式属性数组或CSS选择符
        */
        this.get('morph').start(props);
        return this;
    }
});