当前位置: 代码迷 >> JavaScript >> JS动画片算法学习
  详细解决方案

JS动画片算法学习

热度:124   发布时间:2012-11-23 00:03:43.0
JS动画算法学习
function Opacity(dom , spec) {
	Element.extend(dom);
	var from = spec.from || dom.getOpacity();
	var to = spec.to || '1.0';
	var fps = spec.fps || 100;
	var delay = spec.delay || 0;
	var duration = spec.duration;
	var startOn = delay * 1000;
	var finishOn = startOn + duration * 1000;
	var totalTime = finishOn - startOn;
	var totalFrames  = fps * duration;
	var currentFrame = 0;
	var fromToDelta = to - from ;
	var interval;
	var transition = function(pos) {
      return (-Math.cos(pos*Math.PI)/2) + .5;
    };
	function render(pos) {
		pos = (transition(pos) * fromToDelta) + from;
		dom.setStyle({
			opacity : pos
		});
	}
	function loop() {
		var timePos = new Date().getTime();
		if (timePos >= finishOn) {
	        render(1);
	        return;
	      }
		var pos   = (timePos - startOn) / totalTime,
          frame = (pos * totalFrames).round();
	      if (frame > currentFrame) {
	        render(pos);
	        currentFrame = frame;
	      }
	      interval = setTimeout(loop , 15);
	}
	var stamp = new Date().getTime();
	startOn += stamp;
	finishOn += stamp;
	interval = setTimeout(loop , 15);
}
Opacity($('d2') , {
	to : 0.3,
	duration : 3,
	delay : 1
});
?
  相关解决方案