JavaScript Animations, Part II: Consecutive Animations - Doc JavaScript

Consecutive Animations

Here's the HTML code that defines our animated elements:

<DIV ID="ball1" STYLE="position: absolute; left: 200; -->
top: 200; width: 50;"><IMG SRC="ball1.gif" WIDTH="50" -->
HEIGHT="50"></DIV>
<DIV ID="ball2" STYLE="position: absolute; left: 350; -->
top: 480; width: 25;"><IMG SRC="ball2.gif" WIDTH="25" -->
HEIGHT="25"></DIV>

We embed the following script at the end of the document:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
document.write("<SCRIPT SRC='animate.js'></SCRIPT>");
onload = start;
function start() {
  anim1 = new animation("ball1");
  if (!anim1.element) return;
  anim2 = new animation("ball2");
  anim2.slideBy(200, -300, 10, 50, "anim1.circle(100, 0, -60, -->
0, 3, 50)");
}
// -->
</SCRIPT>

As you can see, it isn't easy to create consecutive animations, because each following animation must be handed to its previous one as a string. As a result, we must define strings within strings. Let's change the nature of the statement argument. Instead of specifying a statement to be executed at the end of the animation, we'll hand the method an array of statements. Here's an example:

function start() {
  anim1 = new animation("ball1");
  if (!anim1.element) return;
  anim2 = new animation("ball2");
  myArray = new Array();
  myArray[0] = "anim1.circle(100, 0, -60, 0, 3, 50, 'myArray')";
  myArray[1] = "anim2.circle(100, 30, 30, 2, 5, 25, 'myArray')";
  anim2.slideBy(200, -300, 10, 50, "myArray");
}

The array must be defined without the var keyword, because it should be global. By handing the name of the array (as a string) to the animation functions, they can execute the upcoming statement in the array when the current animation ends. You may recall the following statement in our methods:

if (this.statement) eval(this.statement);

This statement executes when the current animation comes to an end. Instead of evaluating the statement parameter, we need to shift off and evaluate its first statement:

if (this.statement) {
  var ar = eval(this.statement);
  if (ar.length > 0)
    eval(ar.shift());
}

The first statement in this block assigns a reference of the global array to a local variable named ar. Since ar simply references the array of animation commands, any change we make to ar also reflect the actual global array. If the array still has one or more elements (animation commands), we shift off its first element and evaluate it. The built-in shift() method was introduced in Navigator 4.0x. It removes the first element from an array and returns that element. Therefore, it changes the length of the array. However, the shift() method isn't supported by Internet Explorer 4.0x. We'll write our own version of the function:

function shift(ar) {
  var first = ar[0];
  for (var i = 1; i < ar.length; i++) {
    ar[i - 1] = ar[i];
  }
  ar.length--;
  return first;
}

Here's the corresponding cross-browser conditional block:

if (this.statement) {
  var ar = eval(this.statement);
  if (ar.length > 0)
    eval(shift(ar));
}

Created: May 21, 1998
Revised: May 21, 1998

URL: https://www.webreference.com/js/column19/consecutive.html