[转帖]Mootools源码分析-38 -- Fx.Elements

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

原作者：我佛山人

 

//Element集合的CSS动画效果,演示:http://demos.mootools.net/Fx.Elements
Fx.Elements = new Class({

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

    //构造函数
    initialize: function(elements, options)    {
        //当前的作用对象集合
        this.elements = this.subject = $$(elements);
        //调用父类的同名方法
        arguments.callee.parent(options);
    },

    //根据初始值，结束值和变量求目标值
    compute: function(from, to, delta)    {
        var now = {};
        //遍历集合中每项对应的目标值
        for (var i in from)    {
            //取出各项初始值及结束值
            var iFrom = from[i], iTo = to[i], iNow = now[i] = {};
            //计算各项的属性目标值
            for (var p in iFrom) iNow[p] = arguments.callee.parent(iFrom[p], iTo[p], delta);
        }
        return now;
    },

    //设置目标值,根据代码有文档的一致性风格,set方法和compute方法之间的位置应该固定
    set: function(now)    {
        for (var i in now)    {
            var iNow = now[i];
            for (var p in iNow) this.render(this.elements[i], p, iNow[p], this.options.unit);
        }
        return this;
    },

    //开始动画
    start: function(obj)    {
        //根据配置检查约束条件
        if (!this.check(obj))    return this;
        //各项对应的初始及结束值集合
        var from = {}, to = {};
        //遍历提供的值集合对象
        for (var i in obj)    {
            var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {};
            for (var p in iProps)    {
                var parsed = this.prepare(this.elements[i], p, iProps[p]);
                iFrom[p] = parsed.from;
                iTo[p] = parsed.to;
            }
        }
        //调用父同名方法
        return arguments.callee.parent(from, to);
    }
});