Time-Based Elliptical Motion

Cross-Browser DHTML Animation using the CBE API by Mike Foster.

This example uses the ellipse() CBE method.

Here's the CSS for the positioned elements.

.clsCBE {
  position:absolute; visibility:hidden; overflow:hidden;
  margin:0; padding:0; width:64; height:64; clip:rect(0 64 64 0);
  background:transparent; layer-background-color:transparent;
}

Here's the HTML for the positioned elements.

<div id="ele2" class="clsCBE"><img src="../images/circle6.gif" border="0"></div>
<div id="ele3" class="clsCBE"><img src="../images/circle3.gif" border="0"></div>
<div id="ele1" class="clsCBE"><img src="../images/circle1.gif" border="0"></div>

Here's the javascript for this page:

var ele1, ele2, ele3;
function windowOnload() {
  init();
}
function init() {
  ele1 = document.getElementById('ele1').cbe;
  ele1.moveTo('center');
  ele1.show();
  ele1.sequence = new Array(
    "ellipse(100,50,2, 4000,0,1440)",
    "ellipse(200,100,-2,4000,0,-1440)"
  );
  ele2 = document.getElementById('ele2').cbe;
  ele2.moveTo('center');
  ele2.moveBy(200,0);
  ele2.show();
  ele2.sequence = new Array(
    "ellipse(100,200,0,1000,0,-360)",
    "ellipse(100,200,0,1000,0,360)",
    "ellipse(100,200,0,2000,0,-720)",
    "ellipse(100,200,0,2000,0,720)"
  );
  ele3 = document.getElementById('ele3').cbe;
  ele3.moveTo('center');
  ele3.show();
  ele3.sequence = new Array(
    "ellipse(50,100,0,2000,90,450)",
    "ellipse(50,100,0,2000,-90,-450)"
  );
  document.forms['form1'].txtX.focus();
  document.forms['form1'].txtX.select();
}
function handleSubmit() {
  ele1.ellipse(
    document.forms.form1.txtX.value,
    document.forms.form1.txtY.value,
    document.forms.form1.txtI.value,
    document.forms.form1.txtT.value,
    document.forms.form1.txtS.value,
    document.forms.form1.txtP.value
  );
  document.forms['form1'].txtX.focus();
  document.forms['form1'].txtX.select();
  return false;
}
function startCycle() {
  ele1.startSequence();
  ele2.startSequence();
  ele3.startSequence();
}
function stopCycle() {
  ele1.stopSequence();
  ele2.stopSequence();
  ele3.stopSequence();
}

Here's the onClick handler for the "Start Sequence" button.

onclick="startCycle()

Here's the onClick handler for the "Stop" button.

onclick="stopCycle()