js练手之模拟水平抛球运动
-匀加速运动
-匀减速运动
模拟运动有些基本的思路，当前所在点的坐标，元素的长宽是多少，向右/向下运动x/y增加，向上/向左运动x/y减少，运动的路程是多少，用什么方程进行计算，要如何对方程进行适应性修改
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js模拟抛出球运动</title>
</head>
<body>
<div id="ball" style="top: 10px; left: 10px;"></div>
</body>
</html>
body{background-color:rgb(44,52,55);position:relative;width:100%;height:100%;}
#ball {
width: 100px;
height: 100px;
background-color: lightgreen;
position: absolute;
border-radius: 100%;
-webkit-border-radius: 100%;
}
(function () {
//把X,Y维度的运动单独分开处理，X方向是匀速，Y维度是匀加速运动
var t_x = 0,//x维度的时间t
t_y = 0,//y维度的时间t
s_x = 0,//x维度的运动距离
s_y = 0,//y维度的运动距离
t_x_increase=5,
t_y_increase=0.3,
isMovingUp = 1;
var _ball = document.getElementById("ball");
var ballTop = parseInt(_ball.style['top']),
ballLeft = parseInt(_ball.style['left']);
function ballMovement() {//js模拟抛出球运动，这里忽略了空气阻力
t_x += t_x_increase;
if (t_x >= 600) {//水平方向运行到600px时重复
t_x = 0;
}
s_x = t_x;
_ball.style['left'] = (ballLeft + s_x) + 'px';
t_y += t_y_increase;
if (t_y >= 6 ) {//y方向向下加速到时间为6就反方向
isMovingUp = -1 * isMovingUp;
t_y = 0;
} else if (t_y<0) {//y方向向上减速到时间为0就反方向
isMovingUp = -1 * isMovingUp;
t_y = 0;
}
if (isMovingUp != -1) {
s_y = 10 * Math.pow(t_y, 2) / 2;//s = gt^2/2 加速向下
} else {
s_y = 180-(60 * t_y - 10 * Math.pow(t_y, 2) / 2);// s=vt-gt^2/2 减速向上
}
_ball.style['top'] = (ballTop + s_y) + 'px';//实时设置位置
requestAnimationFrame(ballMovement); // repeat
}
ballMovement();
})();