javascript 设计模式之策略模式
以下代码是使用策略模式与缓动算法实现的一个使小球运动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#boll{
height: 30px;
width: 30px;
border-radius: 30px;
background: #ff5000;
position: absolute;
left:100px;
top: 100px;
}
</style>
</head>
<body>
<h1>策略模式</h1>
<div id="boll"></div>
</body>
<script>
//缓动算法
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]; //dom 节点初试位置
this.propertyName = propertyName; //dom 节点需要被改变的 css 属性名
this.endPos = endPos; //dom 节点目标位置
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);
}
Animate.prototype.update = function(pos){
this.dom.style[this.propertyName] = pos + "px";
}
var div = document.getElementById("boll");
var animate = new Animate(div);
animate.start("left",1000,1000,"sineaseOut");
</script>
</html>
小 A 空间 , 版权所有丨如未注明转载 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明javascript 设计模式之策略模式！
