先进行一个简单的方向运动
此网页主要实现对一个dom元素的运动方向控制及运动状态控制
HTML主要代码如下:
<div id="obj"></div>
<button>tUp</button>
<button>tRight</button>
<button>tDown</button>
<button>tLeft</button>
<button>Quicker</button>
<button>Slower</button>
<button>Stop</button>
JS主要代码如下：
//获取运动目标元素，并初始化其样式
var obj = document.getElementById("obj");
obj.style.position = "absolute";
obj.style.height = "20px";
obj.style.width = "20px";
obj.style.borderRadius = "50%";
obj.style.background = "skyblue";
//获取按钮
var btn = document.getElementsByTagName("button");
//初速度
var speedX = 5, speedY = 5;
//设置定时器，实现运动
obj.t = setInterval( function() {//将该定时器设为obj专属
obj.style.left = obj.offsetLeft + speedX + "px";
obj.style.top = obj.offsetTop + speedY + "px";
//触碰边界时反弹
if ( ( ( document.body.offsetWidth - obj.offsetLeft ) < obj.offsetWidth ) || obj.offsetLeft <= 0 ) {
speedX *= -1;
}
if ( ( ( document.body.offsetHeight - obj.offsetTop ) < obj.offsetHeight ) || obj.offsetTop <= 0 ) {
speedY *= -1;
}
}, 30);
//按钮控制方向
for ( var i = 0; i < btn.length; i ++ ) {
btn[i].dire = i;
btn[i].onclick = function() {
switch( btn[i].dire ) {
case 0: speedY = -Math.abs( speedY ); break;
case 1: speedX = Math.abs( speedX ); break;
case 2: speedY = Math.abs( speedY ); break;
case 3: speedX = -Math.abs( speedX ); break;
case 4: speedX = speedX > 0 ? ++speedX : --speedX; speedY = speedY > 0 ? ++speedY : --speedY; break;
case 5: speedX = speedX > 0 ? --speedX : ( speedX == 0 ? 0 : ++speedX ); speedY = speedY > 0 ? --speedY : ( speedY == 0 ? 0 : ++speedY ); break;
case 4: speedX = 0; speedY = 0;
}
}
}
然后是抛物线运动
抛物线运动的轨迹需要进行计算，按照抛物线公式ax^x+bx+c=y，我们需要得知a、b、c的值才能得知这个轨迹，这样看起来难以马上得知，但通过一点技巧就不同了。
对于a、b、c三个参数，a代表曲率，在没有要求的情况下可以自行设定，因为不管如何的曲率，配合某个b的值都能到达目的坐标；而c就更容易去掉了，c代表抛物线的偏移，如果我们将起点作为坐标系起点，c的值就可以直接忽略了。
html主要代码如下:
<div id="ball"></div>
<div id="target"></div>
一点简单的css样式：
#ball {
height: 20px;
width: 20px;
background: brown;
border-radius: 50%;
position: absolute;
left: 10px;
top: 400px;
}
#target {
height: 20px;
width: 20px;
background: skyblue;
position: absolute;
right: 300px;
top: 100px;
opacity: 0.6;
}
JS主要代码:
var ball = document.getElementById("ball");
//目标位置
var target = {
X : document.getElementById("target").offsetLeft,
Y : document.getElementById("target").offsetTop
}
//将起点定义为圆心
var centerPoint = {
X : ball.offsetLeft,
Y : ball.offsetTop
}
//"圆心"坐标
var x = centerPoint.X, y = centerPoint.Y;
//抛物线公式参数
var a = 0.0008; //曲率，若无要求，自己定义就行了
var b = ( target.Y - a*target.X*target.X ) / target.X;//根据目的坐标和a来计算b的值，因为起点位置已经被作圆心，而a是相对于这个圆心的，所以不能带入起点坐标进行计算
ball.t = setInterval( function() {
x++;//横坐标递增
ball.style.left = x + centerPoint.X + "px";
ball.style.top = a*x*x + b*x + centerPoint.Y + "px";
if ( ball.offsetLeft >= document.getElementById("target").offsetLeft ) {
clearInterval( timer );
}
}), 1);
最后一个示例，缓冲运动
其实缓冲运动的原理也很简单，其基本思路是将加速度与速度的关系转换成每次运动的步长——比如第一次运动的步长为距离的五分之一，本次运动完成后步长又为剩下距离的五分之一，以此类推。这里的步长就相当于单位时间里运动的距离，即速度。但是在逻辑上这个方法是不可能到达终点的（芝诺悖论）。所以在步长某次计算后需要进行约束，不再让它改变，这个值在计算机来看为1像素是再好不过了。所以当步长小于1的时候我们可以将其约束为1。
html主要代码：
<div id="ball"></div>
css样式：
#ball {
height: 20px;
width: 20px;
background: #f00;
position: absolute;
top: 200px;
left: 100px;
border-radius: 50%;
}
JS主要代码：
var ball = document.getElementById("ball")
var distance = 800; //设置移动的距离为800
ball.t = setInterval( function() {
var speed = ( ( distance - ball.offsetLeft ) / 8 ) < 1 ? 1 : ( ( distance - ball.offsetLeft ) / 8 );//步长每次都为剩下距离的八分之一，当某一次步长小于1时，将其约束为1
obj.style.left = obj.offsetLeft + speed + "px";
if ( obj.offsetLeft == distance ) {
clearInterval( obj.t );
}
}, 30);
预览：http://htmlpreview.github.io/?https://github.com/shockw4ver/JavaScriptCases/blob/master/JSSports/缓冲运动.html
PS: 这里我是将缓冲运动封装成了一个函数，可以实现各种属性的缓冲变换，地址为：https://github.com/shockw4ver/JavaScriptCases/blob/master/js lib/move.js
其中还需要一个getCount函数在：https://github.com/shockw4ver/JavaScriptCases/blob/master/js lib/getNodes.js
三种比较典型的运动就在这里啦！
Thanks for Read！