The eighth chapter of Flash theory course Ⅱ of slow motion and elastic movement

Back to "flash Basic Theory Class-Catalog"

Elastic motion

I have always believed that elastic motion will be the most powerful and useful physics concept in ActionScript animation. Almost all objects can use elastic motions. Let's look at what is elastic motion and how it is used in flash programming.

As mentioned at the beginning of this chapter, the acceleration of elasticity is proportional to the distance from the object to the target point. Imagine the nature of the spring in reality. Tie a ball to the end of a rubber band and tie the other end to a fixed place. When the ball is suspended in mid-air, in the absence of external forces, the ball is in the position of the target point. Then the small ball slightly pull, let loose after the rubber band will exert some external forces, and the small ball back to the target point. If you move the ball far away with maximum force, the rubber band exerts a great force on the ball. The ball quickly flies towards the target and moves toward the other side. At this point, the ball is very fast. When it crosses the target point, the rubber band starts to pull it back--changing its speed vector. At this point, the ball will continue to move, but the farther it moves, the greater the pull. Then the velocity vector is zero, in the opposite direction, and everything starts again. Eventually, after a few bounces, the speed slows down until it stops-stopping at the target point.

Here we translate this process into ActionScript. To simplify this process, we first experiment on one-dimensional coordinates.

Elastic motion on one-dimensional coordinates

Here we still use the ball that can be dragged as the main body. The default position is the 0 point of the x axis, which gives it the flexibility to move to the center point. As with easing, you need a variable to hold the value of elasticity. It can be considered that the ratio of the number to the same distance, the larger elastic value will make the elastic motion appears very stiff. A smaller elastic value makes the elastic motion look like a loose elastic band. We use 0.1 as elasticity (Spring):

private var spring:Number = 0.1;
private var targetX:Number = stage.stageWidth / 2;
private var vx:Number = 0;

Don't worry about the current position of the object, just know how to determine the variables and expressions.

Then add the motion code and find the distance to the target point:

var dx:Number = targetX - ball.x;

The acceleration is computed below. The acceleration is proportional to the distance, which is the distance multiplied by the value of spring:

var ax:Number = dx * spring;

After getting the acceleration, we went back to the familiar place and added the acceleration to the velocity vector.

vx += ax;
ball.x += vx;

Before writing the code, first simulate the run-time data. Suppose the X coordinate of the object is 0,VX 0, and the target x is 100,spring 0.1. The implementation process is as follows:

1. Distance (100) times spring to get 10. Add it to VX, when VX becomes 10. The addition of VX to the speed vector causes the x position to become 10.

2. Next time, the distance (100-10) equals 90. The acceleration is 90 times 0.1, and the result is 9. The result was added to VX, which turned VX into 19. The x coordinates change to 29.

3. The next time, the distance is 71, the acceleration is 7.1, and the result is added to VX, which turns VX into 26.1. The x coordinates change to 55.1.

4. The next time, the distance is 44.9, the acceleration is 4.49,vx into 30.59. The x coordinates change to 85.69.