Flash/flex Study Notes (39): elastic exercise

The elastic motion in the animation is similar to the Single Pendulum Motion or the spring (Hu Ke's law F = kx) vibration in the classical physical mechanics.

Let's take a look at the following simulated Demonstration:

Rule:
The ball first starts from the starting point (initially the leftmost) to the target point (central point) to speed up and speed up, but the acceleration is getting smaller and smaller. when it passes through the target point, it was found that the speed was too high to stop the car (the speed reached the maximum value, but the acceleration was reduced to 0! As a result, the acceleration is reversed and changes from 0 to a negative value, which leads to a lower speed. When the speed is reduced to 0, it also goes to the rightmost side (when the negative acceleration reaches the maximum value ), then, under the influence of negative acceleration, I started to turn around and rush .... in this way, the direct friction forces it to exhaust, and finally falls to the target point.

Formula: Hu Ke's law F = kx, while F is based on Niu er's law F = Ma. The two are combined to convert, that is, Ma = kx, that is, a = (k/M) x. useCodeThe linear relationship between acceleration and displacement is shown.

Package {import flash. display. sprite; import flash. events. event; import flash. events. mouseevent; import flash. geom. rectangle; import flash. UI. mouse; import flash. UI. mousecursor; public class spring1 extends sprite {private var ball: ball; private var spring: Number = 0.02; private var targetx: Number = stage. stagewidth/2; private var rect: rectangle; private var VX: Number = 0; private var isdragging = false; Public functi On spring1 () {Init ();} private function Init (): void {BALL = new ball (10); addchild (ball); ball. X = 20; ball. y = stage. stageheight/2; addeventlistener (event. enter_frame, onenterframe); ball. addeventlistener (mouseevent. mouse_down, mousedownhandler); ball. addeventlistener (mouseevent. mouse_over, function () {mouse. cursor = mousecursor. hand}); ball. addeventlistener (mouseevent. mouse_out, mouseouthandler); stage. addeventlis Tener (mouseevent. mouse_up, mouseuphandler); // draw the Auxiliary Line Graphics. linestyle (1); graphics. moveTo (ball. x, ball. y); graphics. lineto (stage. stageWidth-ball.x, ball. y); graphics. moveTo (stage. stagewidth/2, ball. y-10); graphics. lineto (stage. stagewidth/2, ball. Y + 10); rect = new rectangle (ball. x, ball. y, stage. stageWidth-2 * ball. x, 0);} private function mouseouthandler () {If (! Isdragging) {mouse. cursor = mousecursor. auto ;}} // start to drag private function mousedownhandler (E: mouseevent): void {ball. startdrag (true, rect); mouse. cursor = mousecursor. hand; removeeventlistener (event. enter_frame, onenterframe); isdragging = true;} // drag the end of the Private function mouseuphandler (E: mouseevent): void {ball. stopdrag (); addeventlistener (event. enter_frame, onenterframe); mouse. cursor = mousecursor. auto; isdragging = false;} private function onenterframe (Event: Event): void {var DX: Number = targetX-ball.x; var ax: Number = DX * spring; // proportional relationship between acceleration and displacement VX + = ax; VX * = 0.97; // friction coefficient trace (ax, VX); ball. X + = VX ;}}}

The above demonstration is a one-dimensional elastic movement, of course, can also be performed on the X axis and Y axis at the same time

Code:

Package {import flash. display. sprite; import flash. events. event; import flash. events. mouseevent; import flash. UI. mouse; import flash. UI. mousecursor; public class spring2 extends sprite {private var ball: ball; private var spring: Number = 0.1; private var targetx: Number = stage. stagewidth/2; private var targety: Number = stage. stageheight/2; private var VX: Number = 0; private var Vy: Number = 0; private var friction: Number = 0.95; Public Function spring2 () {Init ();} private function Init (): void {BALL = new ball (5); ball. X = math. random () * stage. stagewidth; ball. y = math. random () * stage. stageheight; addchild (ball); addeventlistener (event. enter_frame, enterframehandler); stage. addeventlistener (mouseevent. mouse_down, mousedownhandler); mousedownhandler (null); mouse. cursor = mousecursor. button;} function mousedownhandler (E: mouseevent): void {graphics. clear (); ball. X = math. random () * stage. stagewidth; ball. y = math. random () * stage. stageheight; ball. VX = (math. random () * 2-1) * 50; ball. vy = (math. random () * 2-1) * 50; graphics. moveTo (ball. x, ball. y);} private function enterframehandler (Event: Event): void {// remove the comment below and it will be the elastic movement followed by the mouse // targetx = mousex; // targety = Mousey; var DX: Number = targetX-ball.x; var DY: Number = targetY-ball.y; var ax: Number = DX * spring; var ay: Number = Dy * spring; VX + = ax; Vy + = Ay; VX * = friction; Vy * = friction; ball. X + = VX; ball. Y + = Vy; graphics. linestyle (0.3, 0 xbbbbbb, 1); graphics. lineto (ball. x, ball. Y );}}}

Next: use the code to imitate a monkey rubber band

Package {import flash. display. sprite; import flash. events. event; import flash. UI. mouse; import flash. UI. mousecursor; public class spring3 extends sprite {private var ball: ball; private var spring: Number = 0.1; private var VX: Number = 0; private var Vy: Number = 0; private var friction: Number = 0.95; Public Function spring3 () {Init ();} private function Init (): void {BALL = new ball (10); addchild (ball ); addeventlistener (event. enter_frame, onenterframe); mouse. cursor = mousecursor. hand;} private function onenterframe (Event: Event): void {var DX: Number = mouseX-ball.x; var DY: Number = mouseY-ball.y; var ax: Number = DX * spring; var ay: number = Dy * spring; VX + = ax; Vy + = Ay; VX * = friction; Vy * = friction; ball. X + = VX; ball. Y + = Vy; graphics. clear (); graphics. linestyle (1); graphics. moveTo (mousex, Mousey); graphics. lineto (ball. x, ball. Y );}}}
 

In the above example, there is only one ball. If more balls are considered, the first ball will take the place of the mouse as the target for auto scaling, and the second one will take the first ball as the target for auto scaling, the third ball followed the second one... what will this do?

Package {import flash. display. sprite; import flash. events. mouseevent; import flash. events. event; public class arraychain extends sprite {var arrball: array; var spring: Number = 0.12; var firstball: ball; var gravity: Number = 6; var friction: Number = 0.8; public Function arraychain () {Init ();} private function Init (): void {arrball = new array (5); For (var I: uint = 0, J: uint = arrball. length; I <j; I ++) {arrball [I] = new ball (10, math. random () * 0 xffffff); addchild (arrball [I]);} firstball = arrball [0]; firstball. X = math. random () * stage. stagewidth; firstball. y = math. random () * stage. stageheight; addeventlistener (event. enter_frame, enterframehandler);} private function enterframehandler (E: Event): void {// the first ball uses the cursor position as the target to perform an elastic movement firstball. VX + = (mousex-firstball. x) * spring; firstball. vy + = (mousey-firstball. y) * spring; firstball. vy + = gravity; firstball. VX * = friction; firstball. vy * = friction; firstball. X + = firstball. VX; firstball. Y + = firstball. vy; // prepare to draw a line of graphics. clear (); graphics. linestyle (0.2, 0x666666); graphics. moveTo (mousex, Mousey); graphics. lineto (firstball. x, firstball. y); // The ball following the target is auto-moving for (VAR I = 1, j = arrball. length; I <j; I ++) {var ball: ball = arrball [I]; ball. VX + = (arrball [I-1]. x-ball.x) * spring; ball. vy + = (arrball [I-1]. y-ball.y) * spring; ball. vy + = gravity; ball. VX * = friction; ball. vy * = friction; ball. X + = ball. VX; ball. Y + = ball. vy; graphics. lineto (ball. x, ball. y); // draw a line to link each ball together }}}}

OK, we get a "Spring chain". Of course, the gravity factor is also taken into account. The above examples can be summarized as follows: in the first example, one-dimensional elastic movement can be seen as the influence of the acceleration in the X direction along with the displacement, while in the second example, it can be seen as the superposition of the acceleration in the X and Y directions along with the displacement, the third example can be seen as the comprehensive effect of adding gravity in any direction. In short, the elastic movement in any direction can be considered as the influence of the acceleration (or force) in this direction along with the displacement, and this effect can be superimposed in multiple directions. The following is an example of multi-point elastic movement control:

Package {import flash. display. sprite; import flash. events. event; import flash. events. mouseevent; import flash. UI. mouse; import flash. UI. mousecursor; public class multispring extends sprite {private var ball: ball; private var handles: array; private var spring: Number = 0.3; private var friction: Number = 0.8; private var numhandles: number = 5; Public Function multispring () {Init ();} private function Init (): void {BALL = new ball (20); addchild (ball ); handles = new array (); // create a control (point) Ball for (var I: uint = 0; I <numhandles; I ++) {var handle: ball = new ball (10, 0x0000ff); handle. X = math. random () * stage. stagewidth; handle. y = math. random () * stage. stageheight; handle. addeventlistener (mouseevent. mouse_down, mousedownhandler); addchild (handle); handles. push (handle); handle. addeventlistener (mouseevent. mouse_out, mouseouthandler); handle. addeventlistener (mouseevent. mouse_over, mouseoverhandler);} addeventlistener (event. enter_frame, enterframehandler); addeventlistener (mouseevent. mouse_up, mouseuphandler);} function mouseouthandler (E: mouseevent): void {mouse. cursor = mousecursor. auto;} function mouseoverhandler (E: mouseevent): void {mouse. cursor = mousecursor. hand;} private function enterframehandler (Event: Event): void {// set the position of each control point as the target position and stack the auto motion for (var I: uint = 0; I <numhandles; I ++) {var handle: ball = handles [I] As ball; var DX: Number = handle. x-ball.x; var DY: Number = handle. y-ball.y; ball. VX + = DX * spring; ball. vy + = Dy * spring;} ball. VX * = friction; ball. vy * = friction; ball. X + = ball. VX; ball. Y + = ball. vy; graphics. clear (); graphics. linestyle (1); for (I = 0; I <numhandles; I ++) {graphics. moveTo (ball. x, ball. y); graphics. lineto (handles [I]. x, handles [I]. y) ;}} private function mousedownhandler (E: mouseevent): void paie.tar get. startdrag ();} private function mouseuphandler (Event: mouseevent): void {stopdrag ();}}}