JavaScript Animations, Part II: The animate.js Script (#2) - Doc JavaScript
The animate.js Script (#2)
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 shift(ar) {
var first = ar[0];
for (var i = 1; i < ar.length; i++) {
ar[i - 1] = ar[i];
}
ar.length--;
return first;
}
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) {
var ar = eval(this.statement);
if (ar.length > 0)
eval(shift(ar));
}
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) {
var ar = eval(this.statement);
if (ar.length > 0)
eval(shift(ar));
}
return;
}
this.timer = setTimeout(this.name + ".circleSlide(" + cx + -->
", " + cy + ", " + radius + ", " + angle0 + ", " + angle1 + -->
", " + increment + ", " + interval + ")", interval);
}
Created: May 21, 1998
Revised: May 21, 1998
URL: https://www.webreference.com/js/column19/code2.html