xEllipse - Time-Based Elliptical Animation

Syntax

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.

You Get To Play...

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.

X Radius

Y Radius

Radius Change

Duration (ms)

Start Angle (deg)

Stop Angle (deg)

   

I Get To Play...

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).

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

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

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

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

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

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

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

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

Source

xEllipse is part of the X Library as of v3.15.3.

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

About Cross-Browser.com

Cross-Browser.com is the home of X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

Browser Support

The X core is designed to work with all browsers, Object-detection instead of browser-detection is used exclusively. Currently, I'm testing with the following browsers. X has been tested by others on a wide variety of platforms.

Win7 (Home): IE 9.

WinXP (SP3): Chrome 3.0.195.38, Firefox 3.5.5, IE 7 & 8, Opera 10.60 and Safari 4.0.3.

Linux (Ubuntu 9.10): Chrome 4.0.249.43 and FireFox 3.5.7.

Thanks!

This site and all its javascript were developed with UltraEdit, a most excellent programmer's editor.

Search

Cross-Browser.com

World Wide Web

1
2
3
4