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

àì夳堔傛蜴生んèń 2022-08-14 03:38 306阅读 0赞

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

<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>