DHTML Lab: Cross-Browser Visibility Transitions; Transitions 2 & 3 (Circle-In & Circle-Out)

Cross-Browser Visibility Transitions
transitions 2 & 3: circle-in & circle-out

The "circle" transitions mark the first in our library that perform differently in the two browsers. We cannot clip arcs in Navigator, only rectangular shapes. In fact, the same applies for Explorer, but the transitions are built-in effects, remember, so DHTML rules do not apply.

Instead of a circle, we will use a square shape.

In Explorer, the circle-in effect creates a circle "mask" that has a diameter equal to the width or height of the element, whichever is greater. The circle diminishes in size, creating the circle-in effect. When the diameter equals the size of the smaller side, the complete circle shape becomes visible, and continues to be until the end of the transition.

The circle-out effect begins in the center of the element with a perfect circle. When the circle diameter is equal to the smaller of the two element dimensions, it continues to grow, although the complete circle is not visible, until the circle diameter equals the larger side.

We will duplicate this behavior for Navigator, using a square.

Circle-In

We first create the largest variable which stores the pixel length of the larger element dimension. Since, like the "box" transitions, we will be clipping in all directions, we use the pixel length of half the width and height for our calculations. largest stores the value returned by the JavaScript built-in Math.max() method. Math.max() takes two arguments, and returns the value of the argument which evaluates to a greater value.

case 2:
    largest = Math.max(halfW,halfH);
    increment = Math.round(largest/visits);
    largerW = (halfW > halfH);
    whichEl.transFunct = two;
    break;

We divide largest by visits to get the number of pixels the clip should incremented by on every function call. This value is stored in increment. A Boolean is declared, largerW, that is true if the width is greater than the height and false if the height is greater.

The function that controls the clipping is two().

two()

When two() is called, it first checks the value of largerW to determine if the element width is greater than the height, or vice-versa.

If the width is greater, then the left clip is incremented by the value of increment and the right clip is decremented by the same value. The clip height is then compared to the clip width. If it the same or greater, it top and bottom sides need to be clipped as well.

If the height is greater, then the top and bottom sides are always clipped, and the left and right sides are clipped only when the height is reduced to the size of the width.

function two(){
    if (largerW) {
        this.clip.left += increment;
        this.clip.right -= increment;
        if (this.clip.height >= this.clip.width) {    
            this.clip.top += increment;
            this.clip.bottom -= increment;
        }
    }
    else {
        this.clip.top += increment;
        this.clip.bottom -= increment;
        if (this.clip.width >= this.clip.height){
            this.clip.left += increment;
            this.clip.right -= increment;}
    }
    if (this.clip.height <= 0 && this.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

In this way, we simulate the behaviour of the Explorer "circle" by clipping the larger sides until they are equal to the smaller sides, then clipping all sides. Once both the clip width and the clip height have reached 0, the clipping is cancelled and hideIt() is called to hide the element and restore it to its original size.

Circle-Out

This transition is a hidden-to-visible transition, so the element should be originally hidden.

The variables for circle-out are exactly the same as for circle-in, only we clip the element to no width and height, and make it visible before we call our function. This procedure is the same as the one used for the box-out transition.

case 3:
    largest = Math.max(halfW,halfH);
    increment = Math.round(largest/visits);
    largerW = (halfW > halfH);

    whichEl.clip.left += halfW;
    whichEl.clip.right -= halfW;
    whichEl.clip.top += halfH;
    whichEl.clip.bottom -= halfH;
    whichEl.visibility = "show";
    whichEl.transFunct = three;
    break;

three()

1. the circle-in routines. Of course, the clipping is performed in reverse. That is, all sides are initially clipped until the smaller sides reach their its original size, then the larger sides are clipped until the transition is complete.
2. the box-out routines. Just before clipping, the current size of the sides are compared to their original size. If the difference is an increment or less than an increment, then the original sizes are restored. This ensures that the element will never grow to more than its original size.

When the original size of the element is reached, the function calls are cancelled.

function three(){
  if (largerW) {
    if ((this.clip.left - this.origLeft) <= increment) {
      this.clip.left = this.origLeft;
      this.clip.right = this.origRight;
    }
    else {
      this.clip.left -= increment;
      this.clip.right += increment;
    }
    if (this.clip.height <= this.clip.width) {
      if ((this.clip.top - this.origTop) <= increment) {
        this.clip.top = this.origTop;
        this.clip.bottom = this.origBottom;        
      }
      else {
        this.clip.top -= increment;
        this.clip.bottom += increment;
      }
    }
  }
  else {
    if ((this.clip.top - this.origTop) <= increment) {
      this.clip.top = this.origTop;
      this.clip.bottom = this.origBottom;        
    }
    else {
      this.clip.top -= increment;
      this.clip.bottom += increment;
    }
    if (this.clip.width <= this.clip.height) {
      if ((this.clip.left - this.origLeft) <= increment) {
        this.clip.left = this.origLeft;
        this.clip.right = this.origRight;
      }
      else {
        this.clip.left -= increment;
        this.clip.right += increment;
      }
    }
  }
  if (this.clip.left == this.origLeft
                && this.clip.top == this.origTop)
    clearInterval(transTimer);
}

The more complex routines are behind us. The remainder are more straight-forward and require less code.