JavaScript Animations, Part I: A Straight Line Animation - Doc JavaScript

A Straight Line Animation

Now that we've seen most of the internal methods and properties, it's time to move on to the external ones. We'll start with the most fundamental animation -- a straight line. The following method slides the element a specified number of pixels in each direction:

function slideBy(dx, dy, steps, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var tx = fx + dx;
  var ty = fy + dy;
  this.slideTo(tx, ty, steps, interval, statement);
}

This method does not slide the element to a specific position. It merely moves it a given number of pixels horizontally and vertically. It accepts five arguments:

• dx specifies how many pixels the element should move to the right. If it is a negative value, the element moves to the left.
• dy specifies how many pixels the element should move downward. If it is a negative value, the element moves upward.
• steps specifies the total number of steps (frames) in the animation. A higher value denotes a smoother animation.
• interval specifies the pause, in milliseconds, between each movement. A lower value denotes a smoother animation.
• statement specifies a statement to be executed after the animation is finished. This parameter is parsed by the eval() function, so it must be a string. For example, it could be "alert('done')".

The first statement in the slideBy() function assigns the element's current distance from the left-hand side of the page, to a local variable named fx. We then assign the vertical distance to another local variable, fy, and add up the current coordinates with the specified sliding distance, to compute the target coordinates. The animation object's slideTo() method is called with its necessary arguments. Notice that the slideBy() method doesn't actually animate the element. Instead, it prepares the arguments required for the slideTo() method, so we don't have to repeat the same process twice. As you will see, slideTo() can also be called directly. But before we go on, let's see how to invoke slideBy(). Here's an example:

anim1 = new animation("ball1");
anim1.slideBy(320, -150, 99, 50, "alert('done')");

The first statement in this script segment creates a new animation object. The second statement slides the corresponding element to a new position, located 320 pixels to the right, and 150 pixels upward. The sliding effect is produced by moving the element 99 times towards the target, with a 50-millisecond pause between each movement. When the element reaches its final position, an alert dialog box is displayed. Since slideBy() is heavily based on slideTo(), they must be similar. Let's take a look at the code for the slideTo() function, which is implemented as a method of an animation object:

function slideTo(tx, ty, steps, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var dx = tx - fx;
  var dy = ty - fy;
  var sx = dx / steps;
  var sy = dy / steps;
  var ar = new Array();
  for (var i = 0; i < steps; i++) {
    fx += sx;
    fy += sy;
    ar[i] = new pos(fx, fy);
  }
  this.path = ar;
  this.statement = (statement) ? statement : null;
  this.animate(interval);
}

Notice that the method accepts five arguments, of which the last three are identical to those in the slideBy() method. The first two parameters reflect the absolute coordinates of the target position, because the slideTo() method slides the element to a given point on the page.

The first segment of the function calculates the horizontal (sx) and vertical (sx) distance the element must move each step. It simply divides the total distance, horizontal (dx) and vertical (dy), by the desired number of steps, represented by the function'ss steps parameter. Note that sx and sy are usually floating-point numbers, not integers. The pos() function rounds the cordinates of each position.

The function's second segment is responsible for constructing an animation path -- a set of positions. The animate() method then moves the element between these positions. Notice that the path is actually defined as an array, where each element holds the x and y coordinates of a given location. In order to store two data values in one array element, we use a constructor function named pos():

function pos(x, y) {
  this.x = Math.round(x);
  this.y = Math.round(y);
}

This function creates an object with two properties, x and y. Since pixels are the smallest unit, we recommend using integer values rather than floating-point (real) numbers. Therefore, before assigning the function's parameters to the new object's properties, we hand them to the Math.round() method.

Let's go back to our original slideBy() method. ar is defined as a local array. Once we finish filling it up, we assign it to the animation object's path property. It's possible to declare the path property as an array from the beginning, but we prefer to handle a temporary variable before assigning it to the property.

As you can see, the for loop executes its command block step times. During each execution, we increment fx by sx pixels, and fy by sy pixels. In other words, we advance the horizontal and vertical coordinates for each step. Notice that the first element of the array reflects the first frame in the animation. It does not represent the element's current position, so when we start animating the element, it immediately moves on to the next step (the first position in the array).

After preparing the animation path, we assign the desired statement (which is still stored as a string) to the object's statement property. If the function was called without the last argument (specifying a statement), we assign a null value to the statement property.

Everything is set to start animating the element. The animation path is stored in the path property, and the statement executed at the end of the animation is stored in the statement property. We invoke the object's interval, specifying the pause (in milliseconds) between each frame in the animation.

Created: April 21, 1998
Revised: April 21, 1998

URL: https://www.webreference.com/js/column18/slide.html