物理运动学与JS结合尝试
对应演示实例
下载参考：http://www.oschina.net/code/snippet_2352644_54968
一.最基本高中物理运动学公式
匀速运动：
位移： s=v*t
匀加速运动：
vt=v0+at
位移: s=v0*t+1/2*a*t的平方
重力加速度：
vt=gt
位移: s=1/2*g*t的平方
其实我们涉及的公式就2个，一个匀速，一个匀加速，重力加速度的初速度是0被消除了，不会了请自行脑补这个知识（高中最基本公式）。
二.与页面运动效果的结合分析
1.位移s的结合分析：
假设我们先把移动定位到水平方向的处理，那么我们让一个元素（比如div）动，其实改变的就是left值。
我们的三个公式就如此修改：
匀速运动：
位移： left=v*t
匀加速运动：
位移: left=v0*t+1/2*a*t的平方
2.速度v的结合分析：
我们先知道了其中的位移s其实就是css的left，下面我们看速度v，这个速度其实是自定义变量，就是每秒移动多少距离，在页面就是每毫秒移动多少px。
公式写入单位： left（px）=v(px/ms)*t(ms) ......ms是毫秒
3.时间t的结合分析：
我们页面元素通过时间变化去处理，都是利用间隔函数setInterval，在这里我们也是这个函数的使用。
我们结合以后就是 ：
setInterval(dong(运动学公式),100(ms))
三.页面实践处理匀速运动
基本知识已经准备完毕，我们准备套用二中的分析，先创建一个定位好的div：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
样子：
我们开始写程序，结合我们运动分析：
left=v*t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");//获取div
var sleft=demo.offsetLeft;//起始位置
var t=0;//初始时间，0
var changt=10;//间隔时间，触发变化运动
var v=1;//速度，间隔时间变化的位移
var d=setInterval(dong,changt);//每100毫秒变化一次
function dong(){
if(demo.offsetLeft>600){
clearInterval(d);
}else{
t+=changt;//t变化
var realleft=v*t;
demo.style.left=sleft+realleft+"px";
};
};
};
</script>
</html>
其中的关键点：
1.初始时间0
2.获取初始位置，我们运动拿到的是变化位置要+初始位置
3.时间要小，我们不同于生活，要考虑页面大小
4.加一个清除为了方便演示
四.页面实践处理匀加速运动
上面已经有了基础，我们直接套用公式处理：
left=v0*t+1/2*a*t的平方
我们假设初速度0的处理：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");//获取div
var sleft=demo.offsetLeft;//起始位置
var t=0;//初始时间，0
var changt=1;//间隔时间，触发变化运动
var v=1;//速度，间隔时间变化的位移
var a=0.05;//加速度
var d=setInterval(dong,changt);//每100毫秒变化一次
function dong(){
if(demo.offsetLeft>1000){
clearInterval(d);
}else{
t+=changt;//t变化
var realleft=a*t*t/2;
demo.style.left=sleft+realleft+"px";
};
};
};
</script>
</html>
为了清除效果，对加速度和极限作了修改。
五.曲线移动（水平匀速结合垂直匀加速）
1.不难想象，如果top和left都变化，我们就是曲线移动了，我们先用匀速处理。并且水平垂直v相同，我们把top加入处理：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");//获取div
var sleft=demo.offsetLeft;//起始位置
var stop=demo.offsetTop;//起始位置
var t=0;//初始时间，0
var changt=10;//间隔时间，触发变化运动
var v=1;//速度，间隔时间变化的位移
var d=setInterval(dong,changt);//每100毫秒变化一次
function dong(){
if(demo.offsetLeft>400){
clearInterval(d);
}else{
t+=changt;//t变化
var realleft=v*t;
var realtop=v*t;
demo.style.left=sleft+realleft+"px";
demo.style.top=stop+realtop+"px";
};
};
};
</script>
</html>
2.上面是不是斜着移动了，我们修改水平速度，让他比垂直的大：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");//获取div
var sleft=demo.offsetLeft;//起始位置
var stop=demo.offsetTop;//起始位置
var t=0;//初始时间，0
var changt=10;//间隔时间，触发变化运动
var vt=1;//垂直速度，间隔时间变化的位移
var vl=2;//水平速度，间隔时间变化的位移
var d=setInterval(dong,changt);//每100毫秒变化一次
function dong(){
if(demo.offsetLeft>600){
clearInterval(d);
}else{
t+=changt;//t变化
var realleft=vl*t;
var realtop=vt*t;
demo.style.left=sleft+realleft+"px";
demo.style.top=stop+realtop+"px";
};
};
};
</script>
</html>
3.这次我们把垂直修改为加速运动，水平不变：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>erzi ui</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
/*main*/
#demo{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: #ccc;}
</style>
</head>
<body>
<div id="demo">水平匀速运动</div>
</body>
<script type="text/javascript">
window.onload=function(){
var demo=document.getElementById("demo");//获取div
var sleft=demo.offsetLeft;//起始位置
var stop=demo.offsetTop;//起始位置
var t=0;//初始时间，0
var changt=1;//间隔时间，触发变化运动
var vt=1;//垂直速度，间隔时间变化的位移
var vl=2;//水平速度，间隔时间变化的位移
var at=0.05//垂直加速度
var d=setInterval(dong,changt);//每100毫秒变化一次
function dong(){
if(demo.offsetTop>400){
clearInterval(d);
}else{
t+=changt;//t变化
var realleft=vl*t;
var realtop=at*t*t/2;
demo.style.left=sleft+realleft+"px";
demo.style.top=stop+realtop+"px";
};
};
};
</script>
</html>
曲线出现了有没有，同样我们把双方向都可改为匀加速，当然还有匀减速，变加速等大家去实践。
六.总结
我们大概做了5个演示：
1.水平匀速
2.水平匀加速
3.水平+垂直匀速（v相同）
4.水平+垂直匀速（v不相同）
5.曲线运动（水平匀速+垂直匀加速）
我们demo上传到了代码分享，大家可下载参考。
地址：http://www.oschina.net/code/snippet_2352644_54968