muse.animate.engine :: 动画引擎

这个思路是一直有的，但是自己的能力不到，一直写不出来。这次总算是基本实现了自己的想法。

但是IE下的效率实在太低了。

 

muse.animate.engine : 整个页面，看做是一个动画舞台

muse.animate.engine.$FPS : 动画的帧速率

muse.animate.engine.$INTERVAL : 时间线

muse.animate.engine.$FUNCTIONS : 时间线上的动画

muse.animate.engine.add : 添加一个动画

 

add方法将函数绑定到指定对象上，然后push到$FUNCTIONS里。

每个interval周期，都会将$FUNCTIONS里的函数轮流执行一次。函数执行完毕有两个判断条件：一个是函数出错，将被捕获；另一个是函数返回true。所以，只要将函数返回true，就可以告知引擎动画完成，可以移除。

 

if(typeof muse == 'undefined') muse = { animate : {} };
muse.animate.engine = {
	$FPS : 100,
	$HANDLE : null,
	$FUNCTIONS : [],
	add : function(obj, callback){
		this.$FUNCTIONS.push(function(index){ return callback.call(obj, index); });
		if(!this.isRunning) this.$INTERVAL();
	},
	$INTERVAL : function(){
		var _ = this;
		_.$HANDLE = setInterval(
			function(){
				var l = _.$FUNCTIONS.length;
				if(l < 1){
					clearInterval(_.$HANDLE);
					_.$HANDLE = null;
					_.isRunning = false;
					return;
				};
				var i = 0, crash = false;
				_.isRunning = true;
				while(i < l){
					try{ crash = !!_.$FUNCTIONS[i].call(_, i); }
					catch(e) { crash = true; }
					if(crash){
						_.$FUNCTIONS[i] = null;
						_.$FUNCTIONS.splice(i, 1);
						l--;
					} else {
						i++;
					}
				}
			}, Math.round(1000 / _.$FPS)
		);
	},
	isRunning : false
}
var i = 0;
window.onload = function(){
	var start = new Date();
	var div = document.getElementById('a');
	var f = function(index){ div.innerHTML = ++i + (' | i > 50 = ' + (i > 50) + ' :: ' + (new Date() - start) + '<br />'); return i > 50; }
	muse.animate.engine.add(null, f);
}