JavaScript Animations, Part I: Animating the Element - Doc JavaScript

Animating the Element

Remember the last statement in the moveTo() and circle() methods? Here it is:

this.animate(interval);

It invokes the animation object's animate() method, which is responsible for animating the element. It actually moves it around in its path. Let's take a look at the function's code:

function animate(interval) {
  if (this.active) return;
  this.num = 0;
  this.active = 1;
  this.timer = setInterval(this.name + ".step()", interval);
}

The first statement terminates the function if the active property has a true value. This property indicates whether the element is currently in action. We then set the num property to 0, so the animation starts on the first frame. Since the active has a false value (e.g., false, 0, null), we must set it to 1 (a true value), indicating that the element is currently in the middle of an animation.

The last statement invokes the setInterval() function, which instructs the browser to execute the animation object's step() method every interval milliseconds. setInterval() requires a string, but we cannot use "this.step()", because this is meaningless when evaluated outside of a method or a constructor function. The setInterval() function evaluates the string at given intervals in the future. You may recall from the beginning of our column that the animation object's name property holds a string reflecting the name of a global variable that references the animation object itself. Therefore, we can take advantage of this property to invoke the step() method later on.

The step() method naturally advances the animation one step. Here's the code:

function step() {
  this.moveTo(this.path[this.num].x, this.path[this.num].y);
  if (this.num >= this.path.length - 1) {
    clearInterval(this.timer);
    this.active = 0;
    if (this.statement)
      eval(this.statement);
  } else {
    this.num++;
  }
}

We call the animation object's moveTo() function to set the element's new position. The x coordinate of the new position is stored in this.path[this.num].x, and the y coordinate is stored in this.path[this.num].y. Remember that each element of the array (the path property) has two properties, x and y.

If that was the last step in the animation, clearInterval() is called to clear the current timeout, stored in the object's timer property. This statement immediately terminates the timeout, which would otherwise continue to invoke the step() method (an error would occur, because the method would try to access elements of the array that don't really exist). The execution continues, and the active property is set to 0, indicating that element is no longer in action. We then use the eval() statement to execute the statement frozen inside the statement property in the form of a string.

If the animation hasn't reached its final frame yet, the else statement is executed, instructing the browser to increment the value of the num property. That's all there is to it. Think of the step() method as our animation engine, because it's the one that actually controls the entire animation.

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

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