adds tween and easing classes (with algorithms from Robert Penner) to handle animation

git-svn-id: http://svn.openlayers.org/trunk/openlayers@6097 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-02-08 13:09:58 +00:00
parent 1847986723
commit f6fe7d48d3
7 changed files with 468 additions and 36 deletions
--- a/tests/manual/tween.html
+++ b/tests/manual/tween.html
@@ -0,0 +1,81 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+	<title>Tween Example</title>
+    <style type="text/css">
+        #viewport {
+            width: 500px;
+            height: 300px;
+            border: 1px solid black;
+        }
+        #block {
+            width: 10px;
+            height: 10px;
+            background-color: red;
+            position: absolute;
+        }
+    </style>
+    <script src="../../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var tween, events;
+
+        function init(){
+            tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
+            
+            events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true);
+            events.register("mousedown", null, moveBlock);
+            
+            changeTween();
+        }
+        function moveBlock(e) {
+            var block = OpenLayers.Util.getElement('block');
+            var viewport = OpenLayers.Util.getElement('viewport');
+            var blockPosition = OpenLayers.Util.pagePosition(block);
+            var viewportPosition = OpenLayers.Util.pagePosition(viewport);
+            e.xy = events.getMousePosition(e);
+            var from = {
+                x: blockPosition[0] - viewportPosition[0],
+                y: blockPosition[1] - viewportPosition[1]
+            };
+            var to = {
+                x: e.xy.x,
+                y: e.xy.y
+            }
+            var duration = OpenLayers.Util.getElement('duration').value;
+            var callbacks = {
+                eachStep: function(value) {
+                    block.style.left = (value.x + viewportPosition[0]) + 'px';
+                    block.style.top = (value.y + viewportPosition[1]) + 'px';
+                }
+            }
+            tween.start(from, to, duration, {callbacks: callbacks});
+            
+        }
+        function changeTween() {
+            var transition = OpenLayers.Util.getElement('transition').value;
+            var easing = OpenLayers.Util.getElement('easing').value;
+            tween.stop();
+            tween.easing = OpenLayers.Easing[transition][easing];
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <div id="title">Tween Example</div>
+	<div id="tags"></div>
+	<div id="shortdesc">Show transition effects</div>
+    <select name="transition" id="transition" onchange="changeTween()">
+        <option value="Linear">Linear</option>
+        <option value="Expo">Expo</option>
+    </select>
+    <select name="easing" id="easing" onchange="changeTween()">
+        <option value="easeIn">EaseIn</option>
+        <option value="easeOut">EaseOut</option>
+    </select>
+    <input type="text" name="duration" id="duration" value="100"></input>
+    <div id="viewport">
+        <div id="block"></div>
+    </div>
+    <div id="docs">
+    	This is an example of transition effects.
+    </div>
+  </body>
+</html>