Attack animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Attack animation




<html>
<head>
<title>DynAPI Examples - DynLayer Attack!</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.add('dynapi.fx.CircleAnimation','circleanim.js',['Thread','dynapi.functions.Math']);

  dynapi.library.include('dynapi.library');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('PathAnimation');
  dynapi.library.include('CircleAnimation');
  dynapi.library.include('TimerX');
  dynapi.library.include('MotionX');
</script>
<script language="Javascript">


var myTarget,w=0
dynapi.onLoad (function() {

  myTarget= new DynLayer(null,50,50,5,5,'red')
  myTarget2= new DynLayer(null,100,100,5,5,'blue')

  path = new PathAnimation(myTarget);
  path2 = new PathAnimation(myTarget2);
  // path 3 generated circle path starting at 180degrees about point (250,250)
  // note: circleanim is not required in order to use pathanim
  circle = new CircleAnimation();
  circle.setRadius(50);
  circle.setAngle(180);
  circle.setAngleIncrement(10);
  circlepath = circle.generatePath(250,150);
  path.add(circlepath,true)
  path.playAnimation(0)
  circlepath = circle.generatePath(150,150);
  path2.add(circlepath,true)
  path2.playAnimation(0)

  var img = dynapi.functions.getImage('./dynapiexamples/images/eicon3.gif');
  mySource =new DynLayer(img.getHTML(),100,100,32,32)

  //------- Events ------------------
  myListener = {};
  myListener.ontimer=function(e){
    var me=e.getSource();
    var x=Math.random()*400;y=Math.random()*200
    //if (x<=me.x) {me.dir=0}else{me.dir=2}
    me.slideTo(x,y)
    status="c"
  }
  myListener.onmove=function(e){
    var i,anim
    var me=e.getSource();
    var anim=path.pathPlaying
    var circlepath = circle.generatePath(me.x,me.y);

    for (i=0;i<anim.length;i++) {
      anim[i]=circlepath[i]
    }

    anim=path2.pathPlaying
    circlepath = circle.generatePath(me.x,me.y);
    x=Math.random()*50
    for (i=0;i<anim.length;i++) {
      anim[i]=circlepath[i]+x
    }
  }

  mySource.addEventListener(myListener)
  mySource.startTimer(1500)

  dynapi.document.addChild(myTarget)
  dynapi.document.addChild(myTarget2)
  dynapi.document.addChild(mySource)

})
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation