Home > Developer > Web Develop
-Uniform Acceleration Movement
-Uniform deceleration movement
The code is as follows:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>JS Simulation throws Ball motion</title></Head><Body> <DivID= "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 () { //The motion of the X, Y dimension is individually handled separately, and the direction is constant, and the Y dimension is the Uniform acceleration motion. vart_x = 0,//X-Dimension time tt_y = 0,//time t of the Y dimensions_x = 0,//motion distance of x dimensions_y = 0,//the motion distance of the y dimensionT_x_increase=5, T_y_increase=0.3, Ismovingup= 1; var_ball = document.getElementById ("Ball"); varBalltop = parseint (_ball.style[' top ']), Ballleft= parseint (_ball.style[' left ']); functionBallmovement () {//JS Simulation throws the ball motion, here ignoring the air resistanceT_x + =t_x_increase; if(t_x >= 600) {//repeat when running horizontally to 600pxt_x = 0; } s_x=t_x; _ball.style[' Left '] = (Ballleft + s_x) + ' px '; T_y+=t_y_increase; if(t_y >= 6) {//the Y-direction is accelerated down to 6 in the opposite direction .Ismovingup =-1 *Ismovingup; T_y= 0; } Else if(t_y<0) {//the Y-direction is slowed up to 0 in the opposite direction .Ismovingup =-1 *Ismovingup; T_y= 0; } if(Ismovingup! =-1) {s_y= ten * Math.pow (t_y, 2)/2;//s = GT^2/2 acceleration down}Else{s_y= 180-(* t_y-10 * MATH.POW (t_y, 2)/2);//S=VT-GT^2/2 deceleration upward} _ball.style[' Top ' = (Balltop + s_y) + ' px ';//set location in real timeRequestanimationframe (ballmovement);//Repeat} ballmovement (); })();
JS Simulation throws Ball motion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
