/*
* 相关参考地址 ease 函数 和 animate 函数的思想 http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html
* 我做的只是简单的封装而已
*/
<style type="text/css">
.main{position:relative;width:960px;margin:50px auto 0 auto;height:100px;background:#CCC;}
.box_1{position:absolute;width:50px;height:50px;background:#000;top:0;left:0;}
.box_2{position:absolute;width:50px;height:50px;background:#F00;top:50px;left:0;}
</style>
<div class="main">
<div class="box_1" id="box1"></div>
<div class="box_2" id="box2"></div>
</div>
<script type="text/javascript">
/*----外置函数star----*/
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
/*----外置函数end----*/
var animate = Class.create();
animate.prototype = {
initialize:function(node,opat){
this.node = node;
this.opat = {
begin:null,
change:null,
duration:500,
ease:"bounce",
field:"left",
callback:function(){}
};
Object.extend(this.opat,opat||{});
this.action();
},
ease:{
easeOutBack: function(pos){
var s = 1.70158;
return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
}
},
requestAnimationFrame:function(){
return window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }
},
action:function(){
var _this = this,
_node = _this.node,
_animate = _this.requestAnimationFrame(),
_opat = _this.opat,
_timeStar = new Date().getTime(),
_endPos = _opat.begin + _opat.change,
_ease = _this.ease[_opat.ease];
_animate(function(){
var _timeChange = new Date().getTime() - _timeStar,
_opat_ = _opat,
_node_ = _node,
_ease_ = _ease,
_timeDuration = _opat_.duration,
_changePos = _ease_(_timeChange / _opat_.duration),
_nextPos = _opat_.begin + Math.ceil(_changePos*_opat_.change);
if(_timeChange >= _timeDuration){
_node_.style[_opat_.field] = _endPos + "px";
_opat_.callback();
return
}
_node_.style[_opat_.field] = _nextPos + "px";
_animate(arguments.callee);
})
}
}
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.onclick = function(){
new animate(this,{
begin:box1.offsetLeft,
change:500,
field:"left",
duration:1000,
ease:"easeOutBack",
callback:function(){
console.log("动画完成!!");
}
});
}
</script>
