Cross-Browser.com

xAniEllipse(xa, xr, yr, a1, a2, tt[, at[, qc[, oed[, oea[, oef]]]]]);

• xa - An xAnimation object. xa.e is assumed to be initialized to an Element object.
• xr - The x radius.
• yr - The y radius.
• a1 - Start angle.
• a2 - End angle.
• tt - Total time to move from a1 to a2.
• at - Acceleration type: 1=linear, 2=sine(fast start, slow at end), 3=cosine(slow start, fast at end).
• qc - Cycles. Not valid for linear accel. Two cycles will take the element to the target and back to the start position.
• oed - onEnd delay. A delay (ms) before onEnd is called. If oed > 0 then no arguments are passed to onEnd.
• oea - onEnd argument. It will be passed to onEnd.
• oef - onEnd function. A function reference or a string. It will be called (or evaluated) at the completion of the animation. If it is a function it will receive two arguments: oef(xa, oea). If onEnd returns (or evaluates to) true then the animation will repeat.

xAniEllipse returns xa.

Click a button to cause the corresponding method to be called for each xAnimation object.

pauseresumekill

This code starts the animations in this DIV, and updates them on window resize.

xAniEllipse(xa[0], cw/2, ch, 180, 0, tt, 1, 1, 0, null, 'true');
xAniEllipse(xa[1], cw/2, ch, 180, 360, tt, 1, 1, 0, null, 'true');
onEndTest(xa[2], OEA[0]);

This code starts the animations in this DIV, and updates them on window resize.

xAniEllipse(xa[3], cw/2, ch, 180, 0, tt, 2, 2, 0, null, 'true');
xAniEllipse(xa[4], cw/2, ch, 180, 360, tt, 2, 2, 0, null, 'true');
OEA[1].at = 2;
onEndTest(xa[5], OEA[1]);

This code starts the animations in this DIV, and updates them on window resize.

xAniEllipse(xa[6], cw/2, ch, 180, 0, tt, 3, 2, 0, null, 'true');
xAniEllipse(xa[7], cw/2, ch, 180, 360, tt, 3, 2, 0, null, 'true');
OEA[2].at = 3;
onEndTest(xa[8], OEA[2]);

Each of the above demos call onEndTest() which causes an element to travel around the border of the DIV.

function onEndTest(xa, xd)
{
  var r = 3 * 180;
  xAniEllipse(xa, xd.cw/2, 20, 180, 180+r, xd.tt, xd.at, xd.qc, 0, xd,             /* from sw to se */
    function(a,d) {
      xAniEllipse(a, 20, xd.ch/2, 90, 90+r, xd.tt, xd.at, xd.qc, 0, xd,           /* from se to ne */
        function(a,d) {
          xAniEllipse(a, xd.cw/2, 20, 0, r, xd.tt, xd.at, xd.qc, 0, xd,           /* from ne to nw */
            function(a,d) {
              xAniEllipse(a, 20, xd.ch/2, 270, 270+r, xd.tt, xd.at, xd.qc, 0, xd, /* from nw to sw */
                function(a,d) {
                  onEndTest(a,d);
                }
              );
            }
          );
        }
      );
    }
  );
}