1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>Tween Example</title>
4 <style type="text/css">
8 border: 1px solid black;
13 background-color: red;
17 <script src="../../lib/OpenLayers.js"></script>
18 <script type="text/javascript">
22 tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
24 events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true);
25 events.register("mousedown", null, moveBlock);
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);
36 x: blockPosition[0] - viewportPosition[0],
37 y: blockPosition[1] - viewportPosition[1]
43 var duration = OpenLayers.Util.getElement('duration').value;
45 eachStep: function(value) {
46 block.style.left = (value.x + viewportPosition[0]) + 'px';
47 block.style.top = (value.y + viewportPosition[1]) + 'px';
50 tween.start(from, to, duration, {callbacks: callbacks});
53 function changeTween() {
54 var transition = OpenLayers.Util.getElement('transition').value;
55 var easing = OpenLayers.Util.getElement('easing').value;
57 tween.easing = OpenLayers.Easing[transition][easing];
61 <body onload="init()">
62 <div id="title">Tween Example</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>
70 <select name="easing" id="easing" onchange="changeTween()">
71 <option value="easeIn">EaseIn</option>
72 <option value="easeOut">EaseOut</option>
74 <input type="text" name="duration" id="duration" value="100"></input>
76 <div id="block"></div>
79 This is an example of transition effects.