<!DOCTYPE html>
<html>
<head>
<title>策略模式demo</title>
</head>
<body>
<div style="position: absolute;background:blue;left: 0" id="div">我是div</div>
</body>
<script type="text/javascript">
//运动算法
var tween = {
linear: function( t, b, c, d ){
return c*t/d + b;
},
easeIn: function( t, b, c, d ){
return c * ( t /= d ) * t + b;
},
strongEaseIn: function(t, b, c, d){
return c * ( t /= d ) * t * t * t * t + b;
},
strongEaseOut: function(t, b, c, d){
return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + b;
},
sineaseIn: function( t, b, c, d ){
return c * ( t /= d) * t * t + b;
},
sineaseOut: function(t,b,c,d){
return c * ( ( t = t / d - 1) * t * t + 1 ) + b;
}
};
var Animate = function (dom) {
this.dom = dom;//进行运行的dom节点
this.startTime = 0;//动画开始时间
this.startPos = 0;//dom的初始位置
this.endPos = 0;//dom的目标位置
this.propertyName = null;//dom节点需要被改变的css属性名
this.easing = null;//缓动算法
this.duration = null;//动画持续时间
}
Animate.prototype.start = function (propertyName, endPos, duration, easing) {
this.startTime = +new Date;//动画启动时间
this.startPos = this.dom.getBoundingClientRect()[propertyName];//初始位置
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[ easing ]; // 缓动算法
var _self = this;
var timeId = setInterval(function () {//启动定时器；开始动画
if (_self.step() === false) {//如果动画结束；停止计时器
clearInterval(timeId);
}
},19)
};
Animate.prototype.step = function () {
var t = +new Date;
if (t>=this.startTime+this.duration) {
this.update(this.endPos);
return false;
}
//当前位置
var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
console.log(pos);
}
Animate.prototype.update = function (pos) {
this.dom.style[this.propertyName] = pos+'px';
}
//==========测试===========
var div = document.getElementById('div');
var animate = new Animate(div);
animate.start( 'left', 1000, 2000, 'sineaseOut' );
</script>
</html>