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(); })();