MooTools 1.4 源码分析 - Fx

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

View Code

  1     /*
  2     ---
  3 
  4     name: Fx
  5 
  6     description: Contains the basic animation logic to be extended by all other Fx Classes.
  7 
  8     license: MIT-style license.
  9 
 10     requires: [Chain, Events, Options]
 11 
 12     provides: Fx
 13 
 14     源码分析: 苦苦的苦瓜(http://www.cnblogs.com/hmking)
 15     ...
 16     */
 17 
 18     (function () {
 19 
 20         /**
 21         * @Fx: 本类一般不独立使用,它用来提供作为Fx系的类的基础功能类.所有其他的Fx系列的类都继承本类.
 22         **/
 23         var Fx = this.Fx = new Class({
 24 
 25             Implements: [Chain, Events, Options],
 26 
 27             // #region - constructor -
 28 
 29             /**
 30             * @Events:
 31             * @event start - (function) 特效开始执行时触发
 32             * @event cancel - (function) 手动停止特效执行时触发
 33             * @event complete - (function) 特效执行完成后触发
 34             * @event chainComplete - (function) 当使用link可选项为'chain'时, 该事件在特效链执行完后触发
 35             * @event stop - (function) 特效执行完成前，执行stop方法时触发
 36             **/
 37 
 38             /**
 39             * @Optoins: 
 40             * @option fps - (number: 默认为 60) 动画特效的秒帧数
 41             * @option unit - (string: 默认为 false) 计量单位(如: 'px', 'em', 或 '%').
 42             * @option duration - (number: 默认为 500) 可以让你定义这个动画的持续时间。持续时间和速度是不一样的，因此如果你想让一个对象在一秒内移动100个像素，
 43             *        那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字（以毫秒为单位）. 也可使用以下预定义字符串:
 44             *        'short' - 250ms
 45             *        'normal' - 500ms
 46             *        'long' - 1000ms
 47             * @option frames - (number) 设定动画特效执行的总帧数，默认为null自动匹配
 48             * @option frameSkip - (boolean: 默认为true) 设定动画特效当一帧执行的时间大于每帧之间的时间间隔，是否跳过这段时间所要执行的帧
 49             * @option link - (string: 默认为 ignore) 可为: 'ignore', 'cancel' 或 'chain'
 50             *        'ignore' - 当特效正在执行之中时,再次调用特效开始的方法将被忽略(和可选项'wait'为true时同义)
 51             *        'cancel' - 当特效正在执行之中时,再次调用特效开始的方法将立即取消当前执行的特效,开始执行新的特效
 52             *        'chain' - 当特效正在执行之中时,再次调用特效开始的方法将会把新的特效链接在当前执行的特效之后,依次执行各个特效
 53             * @option transition - (function: 默认为 Fx.Transitions.Sine.easeInOut) 特效的变换方程, 详见Fx.Transitions. 也可以使用如下格式的字符串:
 54             *        transition[:in][:out] - 例如: 'linear', 'quad:in', 'back:in', 'bounce:out', 'elastic:out', 'sine:in:out'
 55             **/
 56             options: {
 57                 /*
 58                 onStart: nil,
 59                 onCancel: nil,
 60                 onComplete: nil,
 61                 */
 62                 fps: 60,
 63                 unit: false,
 64                 duration: 500,
 65                 frames: null,
 66                 frameSkip: true,
 67                 link: 'ignore'
 68             },
 69 
 70             initialize: function (options) {
 71                 this.subject = this.subject || this;
 72                 this.setOptions(options);
 73             },
 74 
 75             // #endregion
 76 
 77             /**
 78             * @method: getTransition
 79             * @returns: (function) - 特效的变换方程
 80             * @description: 取得动画特效所要执行的特效方程
 81             **/
 82             getTransition: function () {
 83                 return function (p) {
 84                     return -(Math.cos(Math.PI * p) - 1) / 2;
 85                 };
 86             },
 87 
 88             /**
 89             * @method: step
 90             * @param now - (mixed) 特效值
 91             * @returns: (function) - 特效的变换方程
 92             * @description: 动画特效每一步执行的操作
 93             **/
 94             step: function (now) {
 95                 if (this.options.frameSkip) {
 96                     // 先取得当前时间减去上一帧执行时的时间，得到两帧之间的时间间隔，计算这段时间内按正常的帧间隔时间能执行的帧的数量
 97                     var diff = (this.time != null) ? (now - this.time) : 0,
 98                             frames = diff / this.frameInterval;
 99                     // 存储当前帧执行时的时间
100                     this.time = now;
101                     // 执行的帧数累加
102                     this.frame += frames;
103                 } else {
104                     this.frame++;
105                 }
106 
107                 // 判断当前帧是否为动画特效的最后一帧
108                 if (this.frame < this.frames) {
109                     // 通过特效方程计算动画特效运行当前帧所要变化的比例因子
110                     var delta = this.transition(this.frame / this.frames);
111                     this.set(this.compute(this.from, this.to, delta));
112                 } else {
113                     // 动画特效执行完毕
114                     this.frame = this.frames;
115                     this.set(this.compute(this.from, this.to, 1));
116                     this.stop();
117                 }
118             },
119 
120             /**
121             * @method: set
122             * @param value - (mixed) 特效值
123             * @description: 用于设置特效值.该方法在特效变换过程中每个'步进'都会调用; 也可以手工调用，留作派生类实现
124             **/
125             set: function (now) {
126                 return now;
127             },
128 
129             /**
130             * @method: compute
131             * @param from - (mixed) 特效的起始值
132             * @param to - (mixed) 特效的结束值
133             * @param delta - (mixed) 特效变化所需要的比例因子
134             * @description: 根据初始值，结束值和比例因子求目标值
135             **/
136             compute: function (from, to, delta) {
137                 return Fx.compute(from, to, delta);
138             },
139 
140             /**
141             * @method: check
142             * @parameters - 与start方法参数一致
143             * @returns: (boolean) - 如果start方法可以继续执行, 则返回 true ; 否则返回 false
144             * @description: 判断当特效正在执行之中时，再次调用特效开始的方法(start)是否继续可以执行start方法
145             **/
146             check: function () {
147                 // 如果特效没有运行，返回true
148                 if (!this.isRunning()) { return true; }
149                 switch (this.options.link) {
150                     case 'cancel': // 不等待正在运行的特效，直接取消并重新开始
151                         this.cancel();
152                         return true;
153 
154                     case 'chain': // 等待当前特效运行结束后再继续运行新特效
155                         this.chain(this.caller.pass(arguments, this));
156                         return false;
157                 }
158                 return false;
159             },
160 
161             /**
162             * @method: start
163             * @param from - (mixed) 特效的起始值. 如果只给出一个参数,则本值将作为结束值
164             * @param to - (mixed, 可选) 特效的结束值
165             * @returns: (object) - 当前的Fx实例
166             * @description: 开始执行特效变换(并触发'start'事件)
167             **/
168             start: function (from, to) {
169                 // 检测start方法是否可以继续执行
170                 if (!this.check(from, to)) { return this; }
171 
172                 /**
173                 # 苦苦的苦瓜
174                 # 2011-09-25
175                 # 将用局部变量_options代替this.options
176                 **/
177                 var _options = this.options;
178 
179                 this.from = from;
180                 this.to = to;
181                 this.frame = (_options.frameSkip) ? 0 : -1;
182                 this.time = null;
183                 // 取得特效执行的变换方程
184                 this.transition = this.getTransition();
185                 var frames = _options.frames,
186                         fps = _options.fps,
187                         duration = _options.duration;
188                 // 可选参数duration既可以数字类型，也可以为字符串类型
189                 this.duration = Fx.Durations[duration] || duration.toInt();
190                 // 取得动画特效每帧之间的时间间隔，毫秒为单位
191                 this.frameInterval = 1000 / fps;
192                 // 计算动画特效执行的总帧数
193                 this.frames = frames || Math.round(this.duration / this.frameInterval);
194                 // 触发'start'事件
195                 this.fireEvent('start', this.subject);
196                 pushInstance.call(this, fps);
197                 return this;
198             },
199 
200             /**
201             * @method: stop
202             * @returns: (object) - 当前的Fx实例
203             * @description: 停止一个特效的执行
204             **/
205             stop: function () {
206                 if (this.isRunning()) {
207                     this.time = null;
208                     pullInstance.call(this, this.options.fps);
209                     if (this.frames == this.frame) {
210                         this.fireEvent('complete', this.subject);
211                         if (!this.callChain()) {
212                             this.fireEvent('chainComplete', this.subject);
213                         }
214                     } else {
215                         this.fireEvent('stop', this.subject);
216                     }
217                 }
218                 return this;
219             },
220 
221             /**
222             * @method: cancel
223             * @returns: (object) - 当前的Fx实例
224             * @description: 取消一个特效的执行(并触发'cancel'事件)
225             **/
226             cancel: function () {
227                 if (this.isRunning()) {
228                     this.time = null;
229                     pullInstance.call(this, this.options.fps);
230                     this.frame = this.frames;
231                     this.fireEvent('cancel', this.subject).clearChain();
232                 }
233                 return this;
234             },
235 
236             /**
237             * @method: pause
238             * @returns: (object) - 当前的Fx实例
239             * @description: 暂停当前执行的特效
240             **/
241             pause: function () {
242                 if (this.isRunning()) {
243                     this.time = null;
244                     pullInstance.call(this, this.options.fps);
245                 }
246                 return this;
247             },
248 
249             /**
250             * @method: pause
251             * @return: (object) - 当前的Fx实例
252             * @description: 恢复执行暂停中的特效
253             * @remark: 只有对暂停中的特效执行本方法才有效果, 否则将忽略.
254             **/
255             resume: function () {
256                 if ((this.frame < this.frames) && !this.isRunning()) {
257                     pushInstance.call(this, this.options.fps);
258                 }
259                 return this;
260             },
261 
262             /**
263             * @method: isRunning
264             * @return: (boolean) 特效运行状态
265             * @description: 检测特效是否正在运行
266             **/
267             isRunning: function () {
268                 var list = instances[this.options.fps];
269                 return list && list.contains(this);
270             }
271 
272         });
273 
274         Fx.compute = function (from, to, delta) {
275             return (to - from) * delta + from;
276         };
277 
278         // 预置特效间隔毫秒数，当可选参数duration为字符串时调用Fx.Durations对象得到特效间隔毫秒数
279         Fx.Durations = { 'short': 250, 'normal': 500, 'long': 1000 };
280 
281         // global timers
282         // instances对象字面量缓存所有的fx实例对象，它的所有键值对中的键就是对应一个fps值，值为一个包含设置了相同fps的动画特效实例的数组
283         // timers对象缓存setInterval()方法返回的ID值
284         var instances = {},
285                 timers = {};
286 
287         /**
288         * @method: loop
289         * @description: 遍历动画特效实例数组，执行动画特效
290         **/
291         var loop = function () {
292             var now = Date.now();
293             for (var i = this.length; i--; ) {
294                 var instance = this[i];
295                 if (instance) { instance.step(now); }
296             }
297         };
298 
299         /**
300         * @method: pushInstance
301         * @description: 遍历动画特效实例数组，执行动画特效
302         **/
303         var pushInstance = function (fps) {
304             // 取得缓存的与参数fps对应的动画特效数组，如果没有则instances对象新建一个键值存储这个数组
305             var list = instances[fps] || (instances[fps] = []);
306             // 缓存fx实例对象
307             list.push(this);
308             if (!timers[fps]) {
309                 // 设置定时器
310                 timers[fps] = loop.periodical(Math.round(1000 / fps), list);
311             }
312         };
313 
314         /**
315         * @method: pullInstance
316         * @param from - (number) 要停止的动画特效实例的秒帧数
317         * @description: 停止运行一个动画特效实例
318         **/
319         var pullInstance = function (fps) {
320             // 取得缓存的与参数fps对应的动画特效数组
321             var list = instances[fps];
322             if (list) {
323                 // 从数组中删除运行pullInstance函数的fx实例对象
324                 list.erase(this);
325                 if (!list.length && timers[fps]) {
326                     // 如果数组为空，则删除instances对象中的这个数组
327                     delete instances[fps];
328                     // 清除定时器
329                     timers[fps] = clearInterval(timers[fps]);
330                 }
331             }
332         };
333 
334     })();