Signature

function xEllipse(e, xRadius, yRadius, radiusInc,
                  totalTime, startAngle, stopAngle)

Parameters

• e - an Element reference or ID string.
• xRadius - the horizontal radius of the ellipse. Must be > 0.
• yRadius - the vertical radius of the ellipse. Must be > 0.
• radiusInc - the integer change in radius per iteration. Can be negative. Provides for some interesting effects.
• totalTime - the total duration of the animation in milliseconds. Must be > 0.
• startAngle - start angle in degrees.
• stopAngle - stop angle in degrees. If (stopAngle - startAngle) is positive then the animation will be clockwise. if it is negative then the animation will be counter-clockwise. (stopAngle - startAngle) must be non-zero.

Define your own values to pass to xEllipse(). The same arguments are passed to each of the demo elements. The 'Reset' button repositions the demo elements in the center of the page.

Each function call is in a for loop which calls xEllipse() for each demo element. a1 is a convenience variable I used. It is the start angle of each element (ele1=0, ele2=90, ele3=180, ele4=270).

Start 1 xEllipse(ele[i], 200, 100, 0, 10000, a1, 2880+a1);

Start 2 xEllipse(ele[i], 100, 200, 0, 10000, 2880+a1, a1);

Start 3 xEllipse(ele[i], 200, 100, 0, 5000, 0, -360);

Start 4 xEllipse(ele[i], 100, 200, 0, 5000, -360, 0);

Start 5 xEllipse(ele[i], 400, 300, -1, 5000, 0, 720);

Start 6 xEllipse(ele[i], 300, 400, -1, 5000, a1, 720+a1);

Start 7 xEllipse(ele[i], 2, 2, 1, 10000, i * 360, 0);

Start 8 xEllipse(ele[i], 2, 2, 1, 10000, 720+a1, a1);

xEllipse is part of the X Library as of v3.15.3, in the file x_anim.js.

function xEllipse(e, xRadius, yRadius, radiusInc,
                  totalTime, startAngle, stopAngle)
{
  if (!(e=xGetElementById(e))) return;
  if (!e.timeout) e.timeout = 25;
  e.xA = xRadius;
  e.yA = yRadius;
  e.radiusInc = radiusInc;
  e.slideTime = totalTime;
  startAngle *= (Math.PI / 180);
  stopAngle *= (Math.PI / 180);
  var startTime = (startAngle * e.slideTime) / (stopAngle - startAngle);
  e.stopTime = e.slideTime + startTime;
  e.B = (stopAngle - startAngle) / e.slideTime;
  e.xD = xLeft(e) - Math.round(e.xA * Math.cos(e.B * startTime)); // center point
  e.yD = xTop(e) - Math.round(e.yA * Math.sin(e.B * startTime)); 
  e.xTarget = Math.round(e.xA * Math.cos(e.B * e.stopTime) + e.xD); // end point
  e.yTarget = Math.round(e.yA * Math.sin(e.B * e.stopTime) + e.yD); 
  var d = new Date();
  e.C = d.getTime() - startTime;
  if (!e.moving) {e.stop=false; _xEllipse(e);}
}
function _xEllipse(e)
{
  if (!(e=xGetElementById(e))) return;
  var now, t, newY, newX;
  now = new Date();
  t = now.getTime() - e.C;
  if (e.stop) { e.moving = false; }
  else if (t < e.stopTime) {
    setTimeout("_xEllipse('"+e.id+"')", e.timeout);
    if (e.radiusInc) {
      e.xA += e.radiusInc;
      e.yA += e.radiusInc;
    }
    newX = Math.round(e.xA * Math.cos(e.B * t) + e.xD);
    newY = Math.round(e.yA * Math.sin(e.B * t) + e.yD);
    xMoveTo(e, newX, newY);
    e.moving = true;
  }  
  else {
    if (e.radiusInc) {
      e.xTarget = Math.round(e.xA * Math.cos(e.B * e.slideTime) + e.xD);
      e.yTarget = Math.round(e.yA * Math.sin(e.B * e.slideTime) + e.yD); 
    }
    xMoveTo(e, e.xTarget, e.yTarget);
    e.moving = false;
  }  
}