JSアニメーションアルゴリズム学習
1455 ワード
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
});