Circle Animation

Circle Animation : Animation Path : Ajax Layer JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Animation Path »




http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Circle Animation</title>
<script language="Javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.fx.Thread');
dynapi.library.include('dynapi.fx.CircleAnimation');
</script>
<script language="Javascript">

dynapi.onLoad ( function() {
  block = new DynLayer();
  block.setSize(20,20);
  block.setLocation(200,200);
  block.setBgColor("red");

  circle = new CircleAnimation(block);
  circle.setRadius(50);
  circle.setAngle(180);
  circle.setAngleIncrement(10);
  circle.sleep(20);


  circle.playAnimation();

  var listener = {
    onpathstart : function(e) {
      status = "start";
    },
    onpathrun : function(e) {
      var o = e.getSource();
      status = "play "+o.x+" "+o.y;
    },
    onpathstop : function(e) {
      var o = e.getSource();
      status = "stop "+o.x+" "+o.y;;
    }
  };

  block.addEventListener(listener);
  dynapi.document.addChild(block);

});

//-->
</script>
</head>

<body bgcolor="#ffffff">
<script>
  dynapi.document.insertAllChildren();
</script>

<p>Circle
<br>radius: <a href="javascript:circle.setRadius(50)">50</a> | <a href="javascript:circle.setRadius(100)">100</a>
<br>H radius: <a href="javascript:circle.setHRadius(50)">50</a> | <a href="javascript:circle.setHRadius(100)">100</a>
<br>V radius: <a href="javascript:circle.setVRadius(50)">50</a> | <a href="javascript:circle.setVRadius(100)">100</a>
<br>angle increment: <a href="javascript:circle.setAngleIncrement(10)">10</a> | <a href="javascript:circle.setAngleIncrement(5)">5</a>
<br>sleep: <a href="javascript:circle.sleep(20)">20</a> | <a href="javascript:circle.sleep(40)">40</a>
</body>
</html>