JavaScript动画实现初探

        
(function() {var begin, // 开始动画的时间el, start, end, duration;var INTERVAL = 13;function now() {return (new Date).getTime();}/*** 执行一步动画（更新属性） */
function _animLeft() {
var pos = (now() - begin) / duration;
if (pos >= 1.0) {
return false;
}
return !!(el.style.left = start + (end - start) * pos);
}
 
/**
* 对一个DOM执行动画，left从_start到_end，执行时间为
* _duration毫秒。
*
* @param  {object} _el       要执行动画的DOM节点
* @param  {integer} _start   left的起始值
* @param  {integer} _end     left的最终值
* @param  {integer} _duration  动画执行时间
*/
function animLeft(_el, _start, _end, _duration) {
stopped = false;
begin = now();
el = _el;
start = _start;
end = _end;
duration = _duration || 1000;
 
var step = function() {
if (_animLeft()) {
setTimeout(step, INTERVAL);
}
};
setTimeout(step, 0);
}
 
window.animLeft = animLeft;
})();
 
animLeft(
document.getElementById('el'),
100,
200
)

        function ease(time) {
return time * time;
}
 
/**
* 执行一步动画（更新属性）
*/
function _animLeft() {
var pos = (now() - begin) / duration;
if (pos >= 1.0) {
return false;
}
pos = ease(pos);
return !!(el.style.left = (start + (end - start) * pos) + "px");
}

        jQuery.easing = {
linear: function( p ) {
return p;
},
swing: function( p ) {
return 0.5 - Math.cos( p * Math.PI ) / 2;
}
};

jQuery.easing.myEasing = function( p ) { return ... }