JavaScript Animations, Part II: The animate.js Script (#1) - Doc JavaScript | WebReference

JavaScript Animations, Part II: The animate.js Script (#1) - Doc JavaScript


The animate.js Script (#1)

var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
function animation(id) {
  this.element = (NS4) ? document[id] : document.all[id].style;
  this.active = 0;
  this.timer = null;
  this.name = id + "Var";
  eval(this.name + " = this");
  this.show = show;
  this.hide = hide;
  this.left = left;
  this.top = top;
  this.moveTo = moveTo;
  this.slideBy = slideBy;
  this.lineSlide = lineSlide;
  this.slideTo = slideTo;
  this.circle = circle;
  this.circleSlide = circleSlide;
}
function show() {
  this.element.visibility = (NS4) ? "show" : "visible";
}
function hide() {
  this.element.visibility = (NS4) ? "hide" : "hidden";
}
function left() {
  return parseInt(this.element.left);
}
function top() {
  return parseInt(this.element.top);
}
function moveTo(x, y) {
  this.element.left = x;
  this.element.top = y;
}
function slideBy(dx, dy, increment, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var tx = fx + dx;
  var ty = fy + dy;
  this.slideTo(tx, ty, increment, interval, statement);
}
function slideTo(tx, ty, increment, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var dx = tx - fx;
  var dy = ty - fy;
  var steps = Math.round(Math.sqrt(dx * dx + dy * dy) / increment);
  var sx = dx / steps;
  var sy = dy / steps;
  if (this.active) return;
  this.active = 1;
  this.statement = statement;
  this.lineSlide(0, fx, fy, tx, ty, sx, sy, interval);
}
function lineSlide(num, fx, fy, tx, ty, sx, sy, interval) {
  num++;
  this.moveTo(fx + sx * num, fy + sy * num);
  if (this.left() == tx) {
    this.active = 0;
    if (this.statement) eval(this.statement);
    return;
  }
  this.timer = setTimeout(this.name + ".lineSlide(" + num + -->
", " + fx + ", " + fy + ", " + tx + ", " + ty + ", " + sx + -->
", " + sy + ", " + interval + ")", interval);
}
function getAngle(angle) {
  var small = angle % 360;
  if (small < 0) small += 360;
  return small;
}
function circle(radius, angle0, angle1, full, increment, -->
interval, statement) {
  this.statement = statement;
  angle0 = getAngle(angle0);
  if (angle1 != null) {
    angle1 = getAngle(angle1);
    var dangle = 360 * full + ((increment < 0) ? 360 - -->
Math.abs(angle1 - angle0) : Math.abs(angle1 - angle0));
    increment = dangle / Math.round(dangle / increment);
    angle1 = (increment < 0) ? angle0 - dangle : angle0 + dangle;
  }
  var x = this.left();
  var y = this.top();
  var cx = x - radius * Math.cos(angle0 * Math.PI / 180);
  var cy = y + radius * Math.sin(angle0 * Math.PI / 180);
  if (this.active) return;
  this.active = 1;
  this.circleSlide(cx, cy, radius, angle0, angle1, increment, -->
interval);
}
function circleSlide(cx, cy, radius, angle0, angle1, increment, -->
interval) {
  angle0 += increment;
  var x = cx + radius * Math.cos(angle0 * Math.PI / 180);
  var y = cy - radius * Math.sin(angle0 * Math.PI / 180);
  this.moveTo(x, y);
  if ((angle1 != null) && (Math.abs(angle1 - angle0) < 0.001)) {
    this.active = 0;
    if (this.statement) eval(this.statement);
    return;
  }
  this.timer = setTimeout(this.name + ".circleSlide(" + cx + -->
", " + cy + ", " + radius + ", " + angle0 + ", " + angle1 + -->
", " + increment + ", " + interval + ")", interval);
}

http://www.internet.com


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

URL: http://www.webreference.com/js/column19/code1.html