openlayers/tests/manual/tween.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Tween Example</title>
   4     <style type="text/css">
   5         #viewport {
   6             width: 500px;
   7             height: 300px;
   8             border: 1px solid black;
   9         }
  10         #block {
  11             width: 10px;
  12             height: 10px;
  13             background-color: red;
  14             position: absolute;
  15         }
  16     </style>
  17     <script src="../../lib/OpenLayers.js"></script>
  18     <script type="text/javascript">
  19         var tween, events;
  20
  21         function init(){
  22             tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
  23
  24             events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true);
  25             events.register("mousedown", null, moveBlock);
  26
  27             changeTween();
  28         }
  29         function moveBlock(e) {
  30             var block = OpenLayers.Util.getElement('block');
  31             var viewport = OpenLayers.Util.getElement('viewport');
  32             var blockPosition = OpenLayers.Util.pagePosition(block);
  33             var viewportPosition = OpenLayers.Util.pagePosition(viewport);
  34             e.xy = events.getMousePosition(e);
  35             var from = {
  36                 x: blockPosition[0] - viewportPosition[0],
  37                 y: blockPosition[1] - viewportPosition[1]
  38             };
  39             var to = {
  40                 x: e.xy.x,
  41                 y: e.xy.y
  42             }
  43             var duration = OpenLayers.Util.getElement('duration').value;
  44             var callbacks = {
  45                 eachStep: function(value) {
  46                     block.style.left = (value.x + viewportPosition[0]) + 'px';
  47                     block.style.top = (value.y + viewportPosition[1]) + 'px';
  48                 }
  49             }
  50             tween.start(from, to, duration, {callbacks: callbacks});
  51
  52         }
  53         function changeTween() {
  54             var transition = OpenLayers.Util.getElement('transition').value;
  55             var easing = OpenLayers.Util.getElement('easing').value;
  56             tween.stop();
  57             tween.easing = OpenLayers.Easing[transition][easing];
  58         }
  59     </script>
  60   </head>
  61   <body onload="init()">
  62     <div id="title">Tween Example</div>
  63     <div id="tags"></div>
  64     <div id="shortdesc">Show transition effects</div>
  65     <select name="transition" id="transition" onchange="changeTween()">
  66         <option value="Linear">Linear</option>
  67         <option value="Expo">Expo</option>
  68         <option value="Quad">Quad</option>
  69     </select>
  70     <select name="easing" id="easing" onchange="changeTween()">
  71         <option value="easeIn">EaseIn</option>
  72         <option value="easeOut">EaseOut</option>
  73     </select>
  74     <input type="text" name="duration" id="duration" value="100"></input>
  75     <div id="viewport">
  76         <div id="block"></div>
  77     </div>
  78     <div id="docs">
  79         This is an example of transition effects.
  80     </div>
  81   </body>
  82 </html>