var a = { //a的原始坐标 x:x, y:y }, b = { //b的原始坐标 x:x, y:y }, time = 100, //在100步,通过a到达b点 btw = { //b相对于a的坐标 x:b.x-a.x, y:b.y-a.y }, every = { //每一步通过的距离 ex:btw.x/time, ey:btw.y/time }//每次定位a的坐标: a.x = a.x + every.ex; a.y = a.y + every.ey;//再把新的a的x,y坐标,给a元素定位
dx = a.x-b.x, dy = a.y-b.y, d = Math.sqrt(dx * dx + dy * dy), e = this.e * d;
a.x -= ((dx / d) * e ); a.y -= ((dy / d) * e );以上这段代码是什么意思呢?尤其是最后两句。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"></script> <style type="text/css"> .ball{ position:absolute; width:30px; height:30px; background-color:green; border-radius: 15px; text-align:center; line-height:30px; color:white; } </style> <script type="text/javascript"> function go(){ var blockA = document.getElementById("blockA"); var posA = getAxis("blockA"); var posB = getAxis("blockB");
var duration = 3000;//ms var timePass = 0; var frameRate = 15; // 帧频 var itv = setInterval(excute, frameRate); function excute(){ var x, y; timePass += frameRate; if(timePass >= duration){ x = posB.x; y = posB.y;
//a的原始坐标
x:x,
y:y
},
b = {
//b的原始坐标
x:x,
y:y
},
time = 100,
//在100步,通过a到达b点
btw = {
//b相对于a的坐标
x:b.x-a.x,
y:b.y-a.y
},
every = {
//每一步通过的距离
ex:btw.x/time,
ey:btw.y/time
}//每次定位a的坐标:
a.x = a.x + every.ex;
a.y = a.y + every.ey;//再把新的a的x,y坐标,给a元素定位
dy = a.y-b.y,
d = Math.sqrt(dx * dx + dy * dy),
e = this.e * d;
a.x -= ((dx / d) * e );
a.y -= ((dy / d) * e );以上这段代码是什么意思呢?尤其是最后两句。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"></script>
<style type="text/css">
.ball{
position:absolute;
width:30px;
height:30px;
background-color:green;
border-radius: 15px;
text-align:center;
line-height:30px;
color:white;
}
</style>
<script type="text/javascript">
function go(){
var blockA = document.getElementById("blockA");
var posA = getAxis("blockA");
var posB = getAxis("blockB");
var duration = 3000;//ms
var timePass = 0;
var frameRate = 15; // 帧频
var itv = setInterval(excute, frameRate); function excute(){
var x, y; timePass += frameRate; if(timePass >= duration){
x = posB.x;
y = posB.y;
clearInterval(itv);
}else{
x = (posB.x - posA.x) * timePass / duration + posA.x;
y = (posB.y - posA.y) * timePass / duration + posA.y;
}
blockA.style.left = x + "px";
blockA.style.top = y + "px";
}
} function getAxis(objID, type){
var left = parseInt(document.getElementById(objID).style.left.replace("px", ""));
var top = parseInt(document.getElementById(objID).style.top.replace("px", "")); return {x: left, y: top};
}
</script>
</head><body>
<div id="bg" style="border:solid 1px black;width:800px;height:500px;position:absolute;top:50px;">
<div id="blockA" class="ball" style="left: 150px;top: 100px;">A</div>
<div id="blockB" class="ball" style="left: 20px;top: 340px;">B</div>
</div>
<button onclick="go()">Go</button>
</body>
</html>写了个基本的. 在指定时间内匀速移动
这也是一种思路, 这个d表示两者之间的距离,
e表示每个时间点间在d上的步进距离
最后两句就是这个时间点所在的位置距离在x和y方向上的投影.