JavaScript DHTML/Ajax Layer/Animation Path

Материал из Web эксперт
Перейти к: навигация, поиск

Circle Animation: radius, angle

   <source lang="html4strict">

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>

Circle
radius: <a href="javascript:circle.setRadius(50)">50</a> | <a href="javascript:circle.setRadius(100)">100</a>
H radius: <a href="javascript:circle.setHRadius(50)">50</a> | <a href="javascript:circle.setHRadius(100)">100</a>
V radius: <a href="javascript:circle.setVRadius(50)">50</a> | <a href="javascript:circle.setVRadius(100)">100</a>
angle increment: <a href="javascript:circle.setAngleIncrement(10)">10</a> | <a href="javascript:circle.setAngleIncrement(5)">5</a>
sleep: <a href="javascript:circle.sleep(20)">20</a> | <a href="javascript:circle.sleep(40)">40</a> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Glide Animation (Path Animation)

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Glide Animation (Path 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.debug"); dynapi.library.include("PathAnimation"); dynapi.library.include("GlideAnimation"); </script> <script language="Javascript"> DynAPI.onLoad(init); function init() { 

 block = new DynLayer();
 block.setSize(20,20);
 block.setLocation(200,100);
 block.setBgColor("red");
 squarePath = new PathAnimation(block);
 squarePath.sleep(20);
 var p = GlideAnimation(200,100,400,100,7,"slow","slow");
 p = p.concat( GlideAnimation(400,100,400,200,7,"slow","slow") );
 p = p.concat( GlideAnimation(400,200,200,200,7,"slow","slow") );
 p = p.concat( GlideAnimation(200,200,200,100,7,"slow","slow") );
 squarePath.add(p,true);
 var listener = {}
 listener.onpathstart = function(e) {
   DynAPI.debug.print("start");
 }
 listener.onpathrun = function(e) {
   var o = e.getSource();
   DynAPI.debug.print("play "+o.x+" "+o.y);
 }
 listener.onpathfinish = function(e) {
   var o = e.getSource();
   DynAPI.debug.print("stop "+o.x+" "+o.y);
 }
 block.addEventListener(listener);
 dynapi.document.addChild(block);

} //--> </script> </head> <body bgcolor="#999999"> <p>Square Slide:
<a href="javascript://" onclick="squarePath.playAnimation(); return false;">start</a>
<a href="javascript://" onclick="squarePath.stopAnimation(); return false;">pause</a> <p>SlideTo:
(<a href="javascript://" onclick="block.glideTo(200,100); return false;">200,100</a>) slow,slow
(<a href="javascript://" onclick="block.glideTo(400,100); return false;">400,100</a>) slow,slow
(<a href="javascript://" onclick="block.glideTo(400,200); return false;">400,200</a>) slow,slow
(<a href="javascript://" onclick="block.glideTo(200,200); return false;">200,200</a>) slow,slow <p>(<a href="javascript://" onclick="block.glideTo(100,100,5,20,"fast","slow"); return false;">100,100</a>) fast,slow
(<a href="javascript://" onclick="block.glideTo(50,400,5,20,"slow","fast"); return false;">50,400</a>) slow,fast
(<a href="javascript://" onclick="block.glideTo(0,0,5,20,"fast","fast"); return false;">0,0</a>) fast fast </body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Path Animation Demo

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Path 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.library"); dynapi.library.include("dynapi.debug"); dynapi.library.include("PathAnimation"); dynapi.library.include("SlideAnimation"); dynapi.library.include("GlideAnimation"); dynapi.library.include("CircleAnimation"); </script> <script language="Javascript"> dynapi.onLoad(function () { 

 block = new DynLayer();
 block.setSize(20,20);
 block.setLocation(214,174);
 block.setBgColor("red");
 // path 0 straight line manually created
 path = new PathAnimation(block);
 linemanual = [100,100,110,110,120,120,130,130,140,140,150,150,160,160,170,170,180,180,190,190,200,200];
 path.add( linemanual );
 // path 1 straight line generated
 linegenerated = SlideAnimation(100,100, 33,3, 20); // x1,y1,x2,y2,inc
 path.add( linegenerated );
 // path 2 squiggly line
 var x = [90,92,94,97,100,103,107,111,116,120,125,130,135,140,146,151,156,161,167,172,177,183,189,196,203,210,218,227,235,244,252,260,267,273,279,284,288,291,293,294,295,294,293,291,288,285,282,278,274,270,266,263,260,257,254,252,251,251,251,253,255,257,261,266,271,277,284,292,300,310,320,332,344,357,371,385,398,412,424,435];
 var y = [73,73,72,72,73,73,74,75,77,79,82,85,89,94,101,108,116,125,136,147,158,169,180,191,200,208,215,221,226,229,231,231,230,228,225,220,215,209,202,194,187,179,171,163,155,147,139,132,126,119,114,109,104,100,96,92,88,84,81,77,74,71,68,66,64,63,63,64,65,68,73,79,86,96,107,119,131,143,155,165];
 linesquiggle = dynapi.functions.interlacePaths(x,y)
 path.add( linesquiggle );
 // 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,250);
 path.add(circlepath);
 // default interval
 path.sleep(50);
 var listener = {};
 listener.onpathstart = function(e) {
   status = "start";
 }
 listener.onpathrun = function(e) {
   var o = e.getSource();
   status = "play "+o.x+" "+o.y;
 }
 listener.onpathstop = function(e) {
   var o = e.getSource();
   status = "stop "+o.x+" "+o.y;;
 }
 block.addEventListener(listener);
 dynapi.document.addChild(block);

}); </script> </head> <body bgcolor="#999999"> <p>Controls:
sleep: <a href="javascript:path.sleep(20)">20</a> | <a href="javascript:path.sleep(50)">50</a> | <a href="javascript:path.sleep(100)">100</a>
show coordinates: <a href="javascript:alert(path.paths[0])">path 0</a> | <a href="javascript:alert(path.paths[1])">path 1</a> | <a href="javascript:alert(path.paths[2])">path 2</a> | <a href="javascript:alert(path.paths[3])">path 3</a>
<a href="javascript:path.stopAnimation()">stopAnimation</a> <p>Unstored Animations
This type is meant for quick playing, the information is deleted when
the animation is finished playing (this is used in slide animations) <p><a href="javascript:path.playAnimation(linemanual)">quickplay path 0</a>
<a href="javascript:path.playAnimation(linegenerated)">quickplay path 1</a>
<a href="javascript:path.playAnimation(linesquiggle)">quickplay path 2</a>
<a href="javascript:path.playAnimation(circlepath,true)">quickplay path 3</a> (loops) <p>Stored Animations
These play paths that have been saved in the PathAnimation object

loop auto-reset play
Path 0
straight line		 <a href="javascript:path.setLoops(0,true)">on</a> | <a href="javascript:path.setLoops(0,false)">off</a> <a href="javascript:path.setResets(0,true)">on</a> | <a href="javascript:path.setResets(0,false)">off</a> <a href="javascript:path.playAnimation(0)">play</a>
Path 1
generated line		 <a href="javascript:path.setLoops(1,true)">on</a> | <a href="javascript:path.setLoops(1,false)">off</a> <a href="javascript:path.setResets(1,true)">on</a> | <a href="javascript:path.setResets(1,false)">off</a> <a href="javascript:path.playAnimation(1)">play</a>
Path 2
squiggly line		 <a href="javascript:path.setLoops(2,true)">on</a> | <a href="javascript:path.setLoops(2,false)">off</a> <a href="javascript:path.setResets(2,true)">on</a> | <a href="javascript:path.setResets(2,false)">off</a> <a href="javascript:path.playAnimation(2)">play</a>
Path 2
circle		 <a href="javascript:path.setLoops(3,true)">on</a> | <a href="javascript:path.setLoops(3,false)">off</a> <a href="javascript:path.setResets(3,true)">on</a> | <a href="javascript:path.setResets(3,false)">off</a> <a href="javascript:path.playAnimation(3)">play</a>

</body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Path Animation Slide

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Path Animation [Slide]</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.library"); dynapi.library.include("dynapi.debug"); dynapi.library.include("SlideAnimation"); </script> <script language="Javascript"> dynapi.onLoad(function() { 

 block = new DynLayer();
 block.setSize(20,20);
 block.setLocation(100,100);
 block.setBgColor("red");

 var listener = {};
 listener.onthreadstart = function(e) {
   status = "start";
 }
 listener.onthreadrun = function(e) {
   var o = e.getSource();
   status = "play "+o.x+" "+o.y;
 }
 listener.onthreadstop = listener.onthreadfinish = function(e) {
   var o = e.getSource();
   status = "stop "+o.x+" "+o.y;;
 }
 block.addEventListener(listener);

 dynapi.document.addChild(block);

}); //--> </script> </head> <body bgcolor="#999999"> <p>SlideTo:
(<a href="javascript://" onclick="javascript:block.slideTo(100,100)">100,100</a>)
(<a href="javascript://" onclick="javascript:block.slideTo(200,100)">200,100</a>)
(<a href="javascript://" onclick="javascript:block.slideTo(200,200)">200,200</a>)
(<a href="javascript://" onclick="javascript:block.slideTo(100,200)">100,200</a>)
(<a href="javascript://" onclick="javascript:block.slideTo(400,50)">400,50</a>)
(<a href="javascript://" onclick="javascript:block.slideTo(50,400)">50,400</a>) </body> </html> 

      </source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://www.wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Animation_Path&oldid=1653»