This article describes two implementation methods for parabolic trajectory movement of JS balls. Share it for your reference, as follows:
The general idea of js to realize the parabolic trajectory movement of small balls:
1. UsesetInterval()Method, perform interval refresh and update the ball position to achieve dynamic effects
2. Draw small balls and moving areas, and the moving areas can be vertically centered through flex layout.
3. Use physical formulasS(y)=1/2*g*t*t，S(x)=V(x)tTo calculate the path
Confirm nowV(x)=4m/s, The refresh time interval is set to 0.1s. Originally, the conversion between px and meter was different in different sizes. This example uses a 17-inch monitor, about 1px=0.4mm. But the browser is too small, so it can only simulate the parabolic trajectory. In this example, it shrinks the px and meters to 100 times.
The first type: Draw a ball through border-radius
Idea: Useborder-radius: 50%Draw the ball, set relative to the ball, calculate the current position of the ball each time, and assign it to top and left. When calculating the motion trajectory, variables can be calculated by self-increment.setIntervalThe number of calls is 0.1s each time, so that the total time can be calculated. The code is as follows:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*Flex layout of body to achieve vertical centering*/
body {
min-height: 100vh;/*Height adapts to browser height*/
display: flex;
justify-content: center;/*Center level*/
align-items: center;/* Vertical centering*/
font-size: 20px;
font-weight: bold;
}
/*Set the motion area*/
#bg {
width: 600px;
height: 600px;
border: 2px solid #e0e0e0;
border-radius: 4px;/*Set rounded corners for div*/
padding: 20px;
}
/*Generate small balls and define the initial position*/
#ball {
border-radius: 50%;/*Can turn square into circle, 50%*/
background: #e0e0e0;
width: 60px;
height: 60px;
position: relative;
top: 30px;
left: 30px;
}
button {
width: 80px;
height: 30px;
border-radius: 4px;
color: #fff;
background: #AA7ECC;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
}
</style>
</head>
<body>
<div >
At this time the horizontal speed is：4<button onclick="start()">Demo</button>
<div ></div>
</div>
<script type="text/javascript">
function start(){
var x,y,k=1,t;
//x is the horizontal movement path; y is the vertical direction; k records the number of times, which can be multiplied with 0.1 to obtain the time; t records the return id of setInterval, which is used for clearInterval t = setInterval(function(){
x = 30+0.1*k*4*100;
//S(x)=S(0)+t*V(x), 100 is the customized meter to px conversion number y = 30+1/2*9.8*0.1*k*0.1*k*100;//S(y)=S(0)+1/2*g*t*t
var j = ("ball");
//Change the position of the ball by modifying the top and left of the ball = y;
= x;
k++;//Each call, k is incremented by itself, simplifying calculation if(x>480||y>480){
clearInterval(t);//When the ball reaches the boundary, clear setInterval }
},100);//Call the setInterval function every 0.1s}
</script>
</body>
</html>
The second type: canvas in h5 draws balls and motion areas
Idea: Use canvas to draw the ball. Since the ball cannot move through top and left, it requires clearRect to clear the canvas every time it is called, and then draw the calculated ball. The code is as follows:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#myCanvas {
box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
}
</style>
</head>
<body>
<canvas width="600px" height="600px"></canvas>
<script type="text/javascript">
var x=50,y=50,k=1;
var c=("myCanvas");
var cxt=("2d");
="#e0e0e0";
();
(x,y,30,0,*2,true);
();
();
t=setInterval("parabola()",100);
function parabola(){
(0,0,600,600);//Clear the original graphics ();
x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100;
(x,y,30,0,*2,true);
();
();
k++;
if(x>520||y>520){
clearInterval(t);
}
}
</script>
</body>
</html>
Both methods can be implemented, and the calculation methods are the same, but the methods are different. The first one is CSS, adoptedborder-radiusAnd dynamically modify the DOM, the second one uses canvas to draw the graphics, and the drawing process needs to be carefully studied.
For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript's movement effects and techniques》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript graphics drawing skills》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.