加速,减速..............

来源：互联网发布：叠石桥淘宝代销编辑：程序博客网时间：2024/06/10 16:41

先记录一个直线运动的加速,减速,匀速都有

<body>
<div style="height:300px; width:700px; border:1px solid #000000; padding:20px;">
<div id='ss' style="height:20px; width:20px; background-color:#000000; position:relative;"></div>
<div id='sss' style="height:20px; width:20px; background-color:#000000; position:relative; top:20px;"></div>
<div id='ssss' style="height:20px; width:20px; background-color:#000000; position:relative; top:40px;"></div>
<div id='sssss' style="height:20px; width:20px; background-color:#000000; position:relative; top:60px; left:640px;"></div>
<div id='ssssss' style="height:20px; width:20px; background-color:#000000; position:relative; top:80px; left:640px;"></div>
</div>
<script>
var extend = function()
{
    var args = arguments;
    if(!args[1])args = [this,args[0]];
    for(var property in args[1])args[0][property] = args[1][property];
    return args[0];
};
var Class = function(properties){
     var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
     _class.prototype = properties;
     return _class;
};
function $(Id){return document.getElementById(Id)};
var move = new Class({
    count:function(s,v1,v2){
        return [((v2-v1)*(v2+v1))/(2.0*s),2.0*(s/(v1+v2))];
    },
    distance:function(v,a,t){
        return v*t + 0.5*a*t*t;
    },
    initialize:function(obj,v1,v2,s,t){
        this.time = null;
    },
    startmove:function(){
      var self = this;
      var arg = this.count(this.s,this.v1,this.v2);
      this.element.style.left=this.left+(this.direction?this.distance(this.v1,arg[0],this.t):this.distance(this.v1,arg[0],this.t)*(-1));
      this.t=this.t + 1.0;
      if(this.t>=arg[1]){
          this.element.style.left=this.left+(this.direction?this.distance(this.v1,arg[0],arg[1]):this.distance(this.v1,arg[0],arg[1])*(-1));
    if(this.stop)return;
          this.t=0;
          this.direction=this.direction?false:true;
    if(this.repeat){if(this.s>=30){this.s=this.s-30}else{return;}}
          this.left = parseInt(this.left)+this.s*(this.direction?-1:1);
      }
      this.time = setTimeout(function(){self.startmove()},1)
    }
})
move.getmove=function(arg){
    return extend(new move,arg||{})
}

var ss_move = move.getmove({
    v1:10,
    v2:0,
    element:$('ss'),
    s:document.all?640:680,
    t:0,
    left:parseInt($('ss').style.left||0),
    direction:true,
stop:true
});

var sss_move = move.getmove({
    v1:0,
    v2:10,
    element:$('sss'),
    s:document.all?640:680,
    t:0,
    left:parseInt($('sss').style.left||0),
    direction:true,
stop:false
});

var ssss_move = move.getmove({
    v1:5,
    v2:5,
    element:$('ssss'),
    s:document.all?640:680,
    t:0,
    left:parseInt($('ssss').style.left||0),
    direction:true,
stop:false,
repeat:true
});

var sssss_move = move.getmove({
    v1:8,
    v2:0,
    element:$('sssss'),
    s:document.all?640:680,
    t:0,
    left:parseInt($('sssss').style.left||0),
    direction:false,
stop:false
});

var ssssss_move = move.getmove({
    v1:0,
    v2:8,
    element:$('ssssss'),
    s:document.all?640:680,
    t:0,
    left:parseInt($('ssssss').style.left||0),
    direction:false,
stop:false
});

ss_move.startmove();
sss_move.startmove();
ssss_move.startmove();
sssss_move.startmove();
ssssss_move.startmove();
</script>
</body>

还有一个效果是任意点到任意点的

<body>
<div id='ss' style="height:30px; width:30px; background-color:#000000; position:absolute; left:100px; top:100px;"></div>
<div id='sss' style="height:30px; width:30px; background-color:#FF0000; position:absolute;"></div>
<div id='ssss' style="height:30px; width:30px; background-color:#0000FF; position:absolute;left:700px; top:700px;"></div>
<script>
var extend = function()
{
    var args = arguments;
    if(!args[1])args = [this,args[0]];
    for(var property in args[1])args[0][property] = args[1][property];
    return args[0];
};
var Class = function(properties){
     var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
     _class.prototype = properties;
     return _class;
};

move.getmove=function(arg){
return extend(new move,arg||{})
};

var ss_move = move.getmove({
     i:0,
    x1:parseInt($('ss').style.left)||0,
    y1:parseInt($('ss').style.top)||0,
    element:$('ss'),
    v1:0
});

var sss_move = move.getmove({
     i:0,
    x1:parseInt($('sss').style.left)||0,
    y1:parseInt($('sss').style.top)||0,
    element:$('sss'),
    v1:0
});

var ssss_move = move.getmove({
     i:0,
    x1:parseInt($('ssss').style.left)||0,
    y1:parseInt($('ssss').style.top)||0,
    element:$('ssss'),
v1:0

});
ss_move.startmove({x:500,y:500,v:10});
sss_move.startmove({x:500,y:500,v:0},{x:500,y:500,v:10});
ssss_move.startmove({x:500,y:500,v:0},{v:10});
</script>
</body>