JavaScript DHTML/Ajax Layer/Animation Control Point

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

Animation along a path

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999

<html> <head> <title>DynAPI Examples - Spaceship & PathAnimation</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.PathAnimation");
 dynapi.library.include("dynapi.fx.SlideAnimation");
 dynapi.library.include("dynapi.fx.MotionX");
 dynapi.library.include("dynapi.gui.ImageClip");
 dynapi.library.include("dynapi.fx.CircleAnimation");

</script> <script language="Javascript"> dynapi.onLoad(function() {

 block = new ImageClip({x:200,y:200,w:32,h:32,clipImage:"./dynapiexamples/images/ship360.gif",cols:16,rows:1});
 // 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 = {
   onmove : function(e) {
     var me = e.getSource();
     var a= me.getDirectionAngle();
     me.setFrame(Math.floor(a/22))
     status=a
   }
 }
 block.addEventListener(listener);
 block.makeSolid()
 dynapi.document.addChild(block);

}); </script> </head> <body bgcolor="#ffffff">

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>


Motion Example - Using a Control Point

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Motion Example - Using a Control Point</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var attributes = {
     points: {
        to: YAHOO.util.Dom.getXY("target"),
        control: [100, 800]
     }
  };
  var anim = new YAHOO.util.Motion("demo", attributes, 1, YAHOO.util.Easing.bounceOut);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-motion">

Motion Example - Using a Control Point

  <p>This example demonstrates how to animate an element"s position with a control point to create a curved path.</p>
  <p>Click anywhere to start animation.</p>

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Motion Example - Using Multiple Control Points

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Motion Example - Using Multiple Control Points</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var attributes = {
     points: {
        to: YAHOO.util.Dom.getXY("target"),
        control: [ [100, 800], [0, 200], [500, 500] ]
     }
  };
  var anim = new YAHOO.util.Motion("demo", attributes, 1, YAHOO.util.Easing.easeOut);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-motion">

Motion Example - Using Multiple Control Points

  <p>This example demonstrates how to animate an element"s position with multiple control points to create a curved path.</p>
  <p>   Any number of control points may be used, but keep in mind that the more control points, the more work the animation has to do, so performance may suffer.</p>
  <p>Click anywhere to start animation.</p>

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Spaceship and Circle Animation

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999

<html> <head> <title>DynAPI Examples - Spaceship & CircleAnimation</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

</script> <script language="Javascript">

</script> </head> <body bgcolor="#000000" scroll=no> <img src="./dynapiexamples/images/ship360.gif" width="512" height="32">

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> </td></tr></table> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>