Mootools Fx小议

其实谈不上什么"小议", 有空的时候看看Mootools的源码,觉得Fx动画类的实现确实很妙,Fx的本质就是对一个数值量进行控制, 通过Fx.Transition扩展的曲线函数来确定数值变化的速度. 这一原理作用到DOM元素的style属性上, 就出现了让人兴奋的animation效果. Fx的源码并不难理解, 而且方法很清晰, 一开始看的时候, 觉得Fx的set方法有点奇怪:

set: function(now){
    return now;
}

 总想找到类似:

this.now...

 这样的代码, 觉得Fx的实例应该有个属性来记录当前的变化的值, 又看到其step中的用法:

step: function(now){
		if (this.options.frameSkip){
			var diff = (this.time != null) ? (now - this.time) : 0, frames = diff / this.frameInterval;
			this.time = now;
			this.frame += frames;
		} else {
			this.frame++;
		}

		if (this.frame < this.frames){
			var delta = this.transition(this.frame / this.frames);
			this.set(this.compute(this.from, this.to, delta));
		} else {
			this.frame = this.frames;
			this.set(this.compute(this.from, this.to, 1));
			this.stop();
		}
	}

 很容易看出来:

this.compute(this.from, this.to, delta)

 此语句返回当前变化的值. 再稍微一想(比如Fx.Tween的实现), set方法最终要override才有意义. 基于这样的原理我自己写了个NumFx, 实现一个范围内数字的变化:

输出效果很有意思, 你可以明显的感受到数字变化的速度, 我们通过覆写set方法, 在实例每步调用step方法的过程中通过set来更新当前的值, 通过覆写step方法,增加了自定义事件step的触发.这样页面上就能实时的反应结果了.

最后,我想说:mootools, more than awesome! 欢迎讨论 : )