| 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> |
|---|
