JavaScript Animations, Part I: Creating an Animation Object - Doc JavaScript

Creating an Animation Object

We promised a library of animation functions, so we'll put them in an external file named animate.js. We'll define each animated element as an animation object. For example, the red ball on the first page is an animation object -- it has a set of properties and methods. Animating an existing element is very easy, because the dirty work is done by the object's methods. But before we start, we'll define our standard browser-detection variables:

var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;

NS4 is true if the browser supports the document.layers object. In other words, it is true for Navigator 4.0x. The second variable, IE4, is true if the browser supports the document.all object. That is, it is true for Internet Explorer 4.0x. Note that 1 and 0 are equivalent to true and false. We use them because they are shorter.

Now let's take a look at the main constructor function, which is responsible for creating the animation objets:

function animation(id) {
  this.element = (NS4) ? document[id] : document.all[id].style;
  this.active = 0;
  this.timer = null;
  this.path = null;
  this.num = null;
  this.name = id + "Var";
  eval(this.name + " = this");
  this.animate = animate;
  this.step = step;
  this.show = show;
  this.hide = hide;
  this.left = left;
  this.top = top;
  this.moveTo = moveTo;
  this.slideBy = slideBy;
  this.slideTo = slideTo;
  this.circle = circle;
}

The animation() function accepts one argument specifying the ID attribute of the animated element. It assigns the parent object six properties and ten methods.

The element property references the parent of the animated element's style properties, based on the given argument. In Navigator 4.0x, an element's style properties are direct properties of the element, while Internet Explorer 4.0x exposes them as properties of the element's style property. document[id] reflects the element in Navigator, whereas document.all[id] (or simply eval(id)) reflects the element in Explorer.

The active property holds a Boolean value. We initialize it to 0 (which is equivalent to false), and it constantly indicates whether the corresponding element is moving. When the element starts moving, this property is assigned a 1 value. It becomes 0 when the current animation is over.

The timer property is also an internal one. When the animate() method invokes the built-in setInterval() method, it assigns the returned value to this property. The animation is stopped by handing the timer property to the clearInterval() function.

The path property is used to store an animation path. In fact, it is normally an array of simple objects that represent various positions on the page. We initialize this property to null because the element doesn't have an intended animation path yet.

The num property also works behind the scenes. When the animate() method is called to animate an element, it holds the index of the current frame in the animation. Since all animations start on the first frame, we initialize this property to 0.

The name property simply stores a string, combining the element's ID attribute (the function's argument) and the constant substring "Var" attribute. For example, if the argument is "ball1", the value of the object's name property is "ball1Var". We then create a global variable by this name, and assign it a duplicate of the parent object. We assign it the keyword this, which reflects the parent object in a constructor function (or in a method). Since the name of the desired variable is a string, we must use the eval() function to evaluate the constructed statement.

Before we continue, let's see how an animation object is created with the animation() constructor. Here's an example:

anim1 = new animation("ball1");

In this example, anim1 is the animation object. The ID attribute of the corresponding element is "ball1". Take a look at the element's exact HTML definition:

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

Note that the element must be absolutely positioned, with explicit left and top properties. But don't worry about this issue, because we'll show you how to overcome it later in the column.

After defining anim1 as an animation object, it is easy to access its properties and methods. Here are a few examples:

• anim1.element
• anim1.path
• anim1.step()
• anim1.circle()

The animation() constructor function doesn't know the name of the parent object. Its methods can access the parent object by using the keyword this. They can also access it through a global variable, whose name is stored in the object's name property. In our preceding example, the global variable reflecting the object is named ball1Var. We can reference the object as anim1 or ball1Var, but the object's methods only know the second one. Under normal circumstances, they don't need a global variable, because they can access the parent object internally, via this. However, as you'll see later, the use of setTimeout() to repeatedly call one of the methods, demands a global variable for "outside use."

Keep reading to learn more about the methods of an animation object. They position the element, move it around, hide it, and perform many other important routines. Before we discuss them in depth, notice that the methods are named exactly like the functions they reference. For instance, anim1.step() is actually handled by the function named step(). The following statement explains why:

this.step = step;

The name of the method doesn't necessarily have to be the same as the function's name. For example, we could change the name of the step() function to step1(), and the assignment statement would then be:

this.step = step1;

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

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