MooTools 1.4 源码分析 - Fx.Morph

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

View Code

  1     /*
  2     ---
  3 
  4     name: Fx.Morph
  5 
  6     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.
  7 
  8     license: MIT-style license.
  9 
 10     requires: Fx.CSS
 11 
 12     provides: Fx.Morph
 13 
 14     源码分析: 苦苦的苦瓜(http://www.cnblogs.com/hmking)
 15 
 16     ...
 17     */
 18 
 19     // #region - Fx.Morph -
 20 
 21     /**
 22     * @Fx.Morph: 提供一次对多个CSS属性进行动画特效变换的功能，所以本类的属性为多值集合
 23     **/
 24     Fx.Morph = new Class({
 25 
 26         // 继承自Fx.CSS
 27         Extends: Fx.CSS,
 28 
 29         /**
 30         * @method: initialize
 31         * @param element - (mixed) 元素的id或引用
 32         * @param options - (object, 可选) Fx类中提供的可选项
 33         * @description: 构造函数，提供将多个元素的CSS属性值从一个值向另一个值进行转化的功能
 34         **/
 35         initialize: function (element, options) {
 36             // element属性存储特效所作用的元素对象
 37             this.element = this.subject = document.id(element);
 38             // 调用父类的同名方法
 39             this.parent(options);
 40         },
 41 
 42         /**
 43         * @method: set
 44         * @param now - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
 45         *        {
 46         *            'height': 200,
 47         *            'width': 200,
 48         *            'background-color': '#f00',
 49         *            'opacity': 0
 50         *        }
 51         * @returns: (object) 主调Fx.Morph实例
 52         * @description: 将元素的指定CSS属性值立即设为指定值
 53         **/
 54         set: function (now) {
 55             // 如果参数是字符串类型，表示为CSS选择符，从当页页面的样式规则中查找指定的规则
 56             if (typeof now == 'string') {
 57                 now = this.search(now);
 58             }
 59             // 分别设置每一项样式值
 60             for (var p in now) {
 61                 this.render(this.element, p, now[p], this.options.unit);
 62             }
 63             return this;
 64         },
 65 
 66         /**
 67         * @method: compute
 68         * @param from - (object) 解释过的各项样式属性的起始值的对象
 69         * @param to - (object) 解释过的各项样式属性的结束值的对象
 70         * @param delta - (mixed) 特效变化所需要的比例因子
 71         * @returns: (array) 包含计算过的各项样式属性当前值信息的一个数组
 72         * @description: 根据各项样式属性初始值，结束值和特效比例因子计算各项样式属性的当前值
 73         **/
 74         compute: function (from, to, delta) {
 75             var now = {};
 76             for (var p in from) {
 77                 // 对每一项样式属性，调用Fx.CSS类的同名方法计算
 78                 now[p] = this.parent(from[p], to[p], delta);
 79             }
 80             return now;
 81         },
 82 
 83         /**
 84         * @method: start
 85         * @param roperties - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值，则变换的时候将把元素当前的属性值作为起始值.
 86         *        {
 87         *            'height': [10, 100],
 88         *            'width': [900, 300],
 89         *            'opacity': 0,
 90         *            'background-color': '#00f'
 91         *        }
 92         * @returns: (object) - 主调Fx.Morph实例
 93         * @description: 串联执行多个CSS属性的变换(并触发'start'事件)
 94         * @notes:
 95         *        如果传入一个CSS选择器, 则该选择器必须在页面存在相应匹配的样式
 96         *        不支持多选择器(逗号分隔的多个选择器)
 97         *        @import'ed CSS rules will not be available for Morph calls. All CSS selectors must be present in CSS directly loaded into the page.
 98         **/
 99         start: function (properties) {
100             // 检查当前特效运行状态，决定是否运行新特效
101             if (!this.check(properties)) { return this; }
102             // 如果提供properties参数类型为字符串，表明指定的是CSS选择符名，需要从当前页的样式规则中查找各项属性
103             if (typeof properties == 'string') {
104                 properties = this.search(properties);
105             }
106             var from = {},
107                     to = {};
108             // 对每项CSS属性值计算解释后的值，此时的from和to对象每个键值皆为一个数组
109             for (var p in properties) {
110                 var parsed = this.prepare(this.element, p, properties[p]);
111                 from[p] = parsed.from;
112                 to[p] = parsed.to;
113             }
114             // 调用Fx类的构造函数
115             return this.parent(from, to);
116         }
117 
118     });
119 
120     // #endregion
121 
122     // #region - Element.Properties.morph -
123 
124     /**
125     * @element property: morph
126     * @description: 用于设置或获取元素上的Fx.Morph实例，实现单件模式
127     **/
128     Element.Properties.morph = {
129 
130         // setter设置Fx.Morph对象参数
131         set: function (options) {
132             // 获取元素上的Fx.Morph实例后先执行cancel方法，取消特效的执行，然后再设置可选参数
133             this.get('morph').cancel().setOptions(options);
134             return this;
135         },
136 
137         // getter获取Fx.Morph对象
138         get: function () {
139             // 先从临时对象读取，看有没缓存到Fx.Morph实例
140             var morph = this.retrieve('morph');
141             if (!morph) {
142                 // 如果没有缓存，则保存一个新的Fx.Morph实例
143                 morph = new Fx.Morph(this, { link: 'cancel' });
144                 this.store('morph', morph);
145             }
146             return morph;
147         }
148 
149     };
150 
151     // #endregion
152 
153     // #region - Element Method -
154     
155     // 元素调用Fx.Morph的快捷方式
156     Element.implement({
157 
158         /**
159         * @element method: morph
160         * @param properties - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
161         * @returns: (element) 返回主调元素
162         * @description: 对元素执行指定属性值的动画特效变换
163         **/
164         morph: function (props) {
165             // 这是使用上面的getter取Fx.Morph实例，再start，props可以为多个样式属性数组或CSS选择符
166             this.get('morph').start(props);
167             return this;
168         }
169 
170     });
171 
172     // #endregion