xAnimation.arc Demo

Animate an element's position over an elliptical arc. This is an xAnimation method.

For more demos see the animation index page.

Demo Controls

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

pauseresume

No Acceleration

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

XA[0].arc('de0', cw/2, ch, 180, 0, tt, 0, 0, 'true');
XA[1].arc('de1', cw/2, ch, 180, 360, tt, 0, 0, 'true');
travelBorder(XA[2]);

Sine Acceleration

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

XA[3].arc('de3', cw/2, ch, 180, 0, tt, 1, 1, 'true');
XA[4].arc('de4', cw/2, ch, 180, 360, tt, 1, 1, 'true');
travelBorder(XA[5]);

Cosine Acceleration

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

XA[6].arc('de6', cw/2, ch, 180, 0, tt, 2, 1, 'true');
XA[7].arc('de7', cw/2, ch, 180, 360, tt, 2, 1, 'true');
travelBorder(XA[8]);

travelBorder

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

  function travelBorder(xa)
  {
    xa.arc(xa.o.e, xa.o.cw/2, 20, 180, 180+(3*180), xa.o.t, xa.o.a, xa.o.b, function(a) { // sw to se
      xa.arc(a.o.e, 20, a.o.ch/2, 90, 90+(3*180), a.o.t, a.o.a, a.o.b, function(a) {      // se to ne
        xa.arc(a.o.e, a.o.cw/2, 20, 0, 3*180, a.o.t, a.o.a, a.o.b, function(a) {          // ne to nw
          xa.arc(a.o.e, 20, a.o.ch/2, 270, 270+(3*180), a.o.t, a.o.a, a.o.b, function(a) {// nw to sw
            travelBorder(a);                                                              // repeat
          });
        });
      });
    });
  }