We know that the parabolic formula is: Y = AX ^ 2 + bx + c (C is 0 when going through the origin)
Here we can regard y as distance and X as time, so this formula is the relationship between time and displacement;
You can obtain the values of A and B through the known start point and end point coordinates. The following is a display chart of a formula that has obtained the values of A and B.
If the button does not respond, refresh the page.
S =-0.002t ^ 2 + 2 t
Y = AX ^ 2 + bx
S (shift 500px) T (Time 778 ms)
Movemthod (moving distance, moving time in milliseconds)
Source code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> # Vvg P {text -Align: center; font-size: 16px; font- Weight: bold ;}# vvg Div # box {width: 520px; Height: 20px; Border: 1px solid # 333 ; Margin: 10px auto; position: relative ;}# vvg Div # sbox {width: 20px; Height: 20px; position: absolute; left: 0 ; Background: Red ;}# vvg Div # map {width: 778px; Background :# 606060; Height: 500px; margin: 0 Auto; position: relative; overflow: hidden;} # vvg span. s {position: absolute; color: # FFF; font - Size: 12px; left: 10px; top: 6px ;}# vvg span. t {position: absolute; color: # FFF; font - Size: 12px; left: 700px; top: 480px; }# vvg Div. Point {position: absolute; Background: # FFF; width: 2px; Height: 2px ;} </Style> VaR Movemthod = Function (Distance, time ){ // The parameter is the maximum distance to move, and the time used to move to the maximum distance. // Calculates the. B value of the parabolic result after (distance, time), (time ). VaR A =-(distance/Math. Pow (time, 2 )); VaR B = 2 * distance/ Time; // Obtain the relationship between distance and time. Function S (t ){ Return A * T * t + B * T ;} // Mobile Animation Function Movebox (){ VaR Sbox = Document. getelementbyid ('sbox' ); VaR Startt = New Date (); VaR Timer = setinterval ( Function (){ VaR Thistime = New Date ()- Startt; // Set the moving distance VaR Pos = Math. Ceil (S (thistime); sbox. style. Left = POS + "PX" ; // Draw function curves VaR Top = 500- Pos; // Call the plotting function Creatpoint (thistime, top ); If (Thistime-0> 1000 | top> 500) ) Clearinterval (timer ); If (Parseint (sbox. style. Left) <0) sbox. style. Left = 0 + 'px' ;}, 1000/60 );} // Draw path Function Creatpoint (left, top ){ VaR Map = Document. getelementbyid ('map' ); VaR Point = Document. createelement ('div' ); Point. classname = "Point" ; Point. style. Left = Left + 'px'; Point. style. Top = Top + 'px' ; Map. appendchild (point) ;}movebox ();}; </SCRIPT> </body>
For more information, see the question of the front-end of the question.
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
